zudo-panel-designer docs
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

組み込みカタログ

packages/patterns/src/patterns/62 個の組み込みパターン(手書きのオリジナル 12 個 + pgen の静的パターンカタログから移植した 50 個)を提供し、PATTERN_GENERATORS に登録します——この配列が patterns/index.ts とそのグループシャードからどう組み立てられるかは、ジェネレータ契約 → レジストリを参照してください。すべてのパターンはジェネレータ契約に従います。決定論的で、mm 空間で、ここに挙げた範囲に対して resolveParam を通してクランプされます。各パラメータの単位——ミリメートルか、無単位の比率/カウントか——は、その label に記され、下の表に示されます((mm) で終わる label はミリメートル値、centerY(0-1) や単なる Ray count のような、それ以外のものは無単位です)。

pgen 移植の由来

62 個のうち 50 個のパターンは、zpd 向けに手書きされたのではなく、pgen の静的ジェネレータから移植されました。packages/patterns/pgen-port-ledger.json は、その作業の追記専用の記録です。試みたパターンごとに 1 行(portedoriginalrejected のいずれか)があり、その pgen ソース id、分類されたファミリー、そして移植の際に何を削ったか/どう翻訳したかの一行メモを記録します(pgen のジェネレータはグラデーション、複数色の塗り、ピクセル単位のランダム性に頼りがちですが、このパッケージのジェネレータ契約——単一のフラットな color、ランダム性なし——はそれらを意図的に除外しています)。今後の移植ラウンドが従う、繰り返し可能な移植ワークフローについては .claude/skills/port-pgen-patterns/SKILL.md を参照してください。

パラメータリファレンス

この表は、.claude/skills/port-pgen-patterns/scripts/gen-doc-table.mjs によってライブレジストリから生成されます。移植ラウンドのあとは、これを再実行して出力をここ(および英語版)に貼り付けてください。手で行を編集するのではなく、こうすることで、カタログが実際に登録されているものから黙って乖離することがなくなります。

node .claude/skills/port-pgen-patterns/scripts/gen-doc-table.mjs
パターン(nameグループパラメータ(key — label, min–max, step, default)
Dot Grid (dot-grid)originalpitch — Pitch (mm), 2–15, step 0.5, default 5; radius — Dot radius (mm), 0.2–4, step 0.1, default 1
Diagonal Stripes (diag-stripes)originalpitch — Pitch (mm), 2–20, step 0.5, default 6; lineWidth — Stripe width (mm), 0.3–10, step 0.1, default 2
Grid Lines (grid-lines)originalpitch — Pitch (mm), 2–15, step 0.5, default 5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4
Concentric Circles (concentric-circles)originalpitch — Ring pitch (mm), 1–15, step 0.5, default 4; lineWidth — Line width (mm), 0.1–4, step 0.05, default 0.6; centerY — Center Y (0-1), 0–1, step 0.05, default 0.5
Hex Lattice (hex-lattice)originalcell — Cell size (mm), 2–20, step 0.5, default 6; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Checker (checker)originalcell — Cell size (mm), 1–20, step 0.5, default 5
Wave Lines (wave-lines)originalpitch — Row pitch (mm), 2–15, step 0.5, default 5; amplitude — Amplitude (mm), 0.5–8, step 0.25, default 1.5; wavelength — Wavelength (mm), 3–30, step 1, default 12; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6
Crosshatch (crosshatch)originalpitch — Pitch (mm), 2–20, step 0.5, default 7; lineWidth — Line width (mm), 0.1–4, step 0.05, default 0.5
Radial Burst (radial-burst)originalcount — Ray count, 8–96, step 2, default 36; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5; centerY — Center Y (0-1), 0–1, step 0.05, default 0.5; innerRadius — Inner radius (mm), 0–30, step 0.5, default 4
Brick (brick)originalbrickW — Brick width (mm), 3–30, step 0.5, default 12; brickH — Brick height (mm), 2–15, step 0.5, default 5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4
Diamond Lattice (diamond-lattice)originalsize — Diamond size (mm), 3–30, step 0.5, default 8; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Scallops (scallops)originalwidth — Scallop width (mm), 3–30, step 0.5, default 10; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Igeta (igeta)japanesecell — Cell size (mm), 3–20, step 0.5, default 7; barWidth — Bar width (mm), 0.1–3, step 0.05, default 1.8
Asanoha (asanoha)japaneseradius — Star radius (mm), 4–14, step 0.5, default 5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4
Kagome (kagome)japaneseside — Triangle side (mm), 4–20, step 0.5, default 6; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Seigaiha (seigaiha)japaneseradius — Fan radius (mm), 4–18, step 0.5, default 7; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5; rings — Arc rings, 2–7, step 1, default 4
Shippo (shippo)japaneseradius — Circle radius (mm), 4–16, step 0.5, default 6; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5; innerRatio — Inner circle, 0–1, step 0.05, default 0.5
Uroko Scales (uroko-scales)japanesewidth — Scale width (mm), 4–20, step 0.5, default 7; aspect — Scale aspect, 0.6–1.6, step 0.05, default 1
Yagasuri (yagasuri)japanesecolumnWidth — Column width (mm), 4–20, step 0.5, default 6; barbHeight — Barb height (mm), 4–24, step 0.5, default 6
Sayagata (sayagata)japanesecell — Cell size (mm), 4–20, step 0.5, default 7; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6
Raimon (raimon)japanesecell — Cell size (mm), 5–24, step 0.5, default 9; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.7; turns — Spiral turns, 2–5, step 1, default 3
Wachigai (wachigai)japaneseradius — Ring radius (mm), 4–16, step 0.5, default 6; overlap — Overlap, 0.2–0.7, step 0.02, default 0.45; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6
Yoshiwara Tsunagi (yoshiwara-tsunagi)japanesecell — Cell size (mm), 4–20, step 0.5, default 7; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.7
Rub el Hizb (rub-el-hizb)ornamentcell — Cell size (mm), 7–24, step 0.5, default 8; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4
Star and Cross Field (star-and-cross-field)ornamentcell — Cell size (mm), 8–20, step 0.5, default 8; starRatio — Star size, 0.45–0.85, step 0.02, default 0.62
Interlaced Bands (interlaced-bands)ornamentcell — Cell size (mm), 5–20, step 0.5, default 6; bandWidth — Band width (mm), 0.5–5, step 0.1, default 2
Mughal Jali (mughal-jali)ornamentcell — Cell size (mm), 8–24, step 0.5, default 10; web — Web width (mm), 0.5–4, step 0.1, default 1.6
Ten-Point Rosette (ten-point-rosette)ornamentcell — Cell size (mm), 8–24, step 0.5, default 9; pointDepth — Point depth, 0.3–0.75, step 0.01, default 0.5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Kolam Sikku (kolam-sikku)ornamentcell — Cell size (mm), 5–20, step 0.5, default 8; lineWidth — Line width (mm), 0.1–3, step 0.05, default 1.2; dotRadius — Dot radius (mm), 0–3, step 0.1, default 0.7
Aztec Step Fret (aztec-step-fret)ornamentstepUnit — Step unit (mm), 1.3–4, step 0.1, default 1.5; steps — Spiral steps, 2–5, step 1, default 3; armThickness — Arm thickness (mm), 0.3–2.5, step 0.05, default 1
Meander (meander)ornamentcell — Key size (mm), 7–24, step 0.5, default 10; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.8
Endless Knot (endless-knot)ornamenttile — Knot size (mm), 15–40, step 0.5, default 16; strandWidth — Strand width (mm), 0.3–5, step 0.1, default 2; gridN — Weave grid, 2–4, step 1, default 4
Bishamon Koushi (bishamon-koushi)ornamentradius — Hex radius (mm), 4–15, step 0.5, default 5; innerScale — Inner scale, 0.3–0.85, step 0.05, default 0.62
Smith Truchet (smith-truchet)curvestile — Tile size (mm), 2–15, step 0.5, default 5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Hilbert Curve (hilbert-curve)curvescell — Cell size (mm), 18–40, step 0.5, default 26; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5; order — Order, 2–4, step 1, default 3
Dragon Curve (dragon-curve)curvescell — Cell size (mm), 22–45, step 0.5, default 30; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4; iterations — Iterations, 6–8, step 1, default 7
Vicsek Fractal (vicsek-fractal)curvescell — Cell size (mm), 18–40, step 0.5, default 24; depth — Depth, 2–3, step 1, default 3
Astroid Star Grid (astroid-grid)curvescell — Cell size (mm), 10–25, step 0.5, default 13; lineWidth — Line width (mm), 0.1–2, step 0.05, default 0.3; lineCount — Chord count, 8–28, step 1, default 18
Maurer Rose (maurer-rose)curvescell — Cell size (mm), 32–64, step 0.5, default 44; lineWidth — Line width (mm), 0.1–2, step 0.05, default 0.3; petals — Petal param (n), 2–9, step 1, default 6; degreeStep — Degree step (d), 11–99, step 2, default 29
Guilloche (guilloche)curvescell — Cell size (mm), 24–50, step 0.5, default 32; lineWidth — Line width (mm), 0.1–2, step 0.05, default 0.3; lobes — Lobes, 2–9, step 1, default 5; penDistance — Pen distance, 0.2–1.2, step 0.05, default 0.8
Truchet Quarter Arc (truchet-quarter-arc)curvestile — Tile size (mm), 5–20, step 0.5, default 8; gap — Tile gap (mm), 0–4, step 0.1, default 0
Classical Labyrinth (labyrinth-classical)curvesunit — Unit size (mm), 10–45, step 0.5, default 18; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6; circuits — Circuits, 3–12, step 1, default 7
Steiner Chain Ring (steiner-chain)curvescell — Cell size (mm), 10–45, step 0.5, default 16; lineWidth — Line width (mm), 0.1–2, step 0.05, default 0.4; chainCount — Chain count, 3–12, step 1, default 6
Vesica Lens Circle Mesh (vesica-lens-circle-mesh)ringsCircuitspitch — Pitch (mm), 3–20, step 0.5, default 7; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.45
Rings Interlock (rings-interlock)ringsCircuitsradius — Ring radius (mm), 2–12, step 0.5, default 4; bandWidth — Band width (mm), 0.1–3, step 0.05, default 1.4
Circle Quarters (circle-quarters)ringsCircuitscell — Cell size (mm), 4–20, step 0.5, default 8; radiusRatio — Disc size, 0.5–1, step 0.02, default 1
Quatrefoil (quatrefoil)ringsCircuitscell — Cell size (mm), 5–24, step 0.5, default 8; lobeRadius — Lobe radius (mm), 0.5–4, step 0.05, default 1.8
Hex Circuit (hex-circuit)ringsCircuitshexRadius — Hex radius (mm), 3–16, step 0.5, default 5; traceWidth — Trace width (mm), 0.1–3, step 0.05, default 0.6; traceCoverage — Trace coverage, 0.3–1, step 0.05, default 0.7
Via Grid Array (via-grid-array)ringsCircuitscell — Cell size (mm), 3–16, step 0.5, default 5; ringRadius — Ring radius (mm), 0.3–4, step 0.05, default 1.8; holeRatio — Hole ratio, 0.1–0.7, step 0.02, default 0.45
Circuit Board Tiles (circuit-board-tiles)ringsCircuitscell — Cell size (mm), 4–18, step 0.5, default 6; traceWidth — Trace width (mm), 0.1–3, step 0.05, default 0.8; padChance — Pad chance, 0–1, step 0.05, default 0.4
Snowflakes Geometric (snowflakes-geometric)ringsCircuitscell — Cell size (mm), 8–24, step 0.5, default 9; lineWidth — Line width (mm), 0.1–2, step 0.05, default 0.4; flakeSize — Flake size, 0.2–0.6, step 0.01, default 0.4
Eight Point Compass Star Grid (eight-point-compass-star-grid)ringsCircuitscell — Cell size (mm), 5–20, step 0.5, default 7; innerRatio — Short ray ratio, 0.2–0.6, step 0.01, default 0.4
Herringbone (herringbone)tilingsbrickLength — Brick length (mm), 4–30, step 0.5, default 7; brickWidth — Brick width (mm), 2–12, step 0.5, default 2.5; gap — Gap (mm), 0–2, step 0.1, default 0.5
Houndstooth Tooth Grid (houndstooth-tooth-grid)tilingscell — Cell size (mm), 4–20, step 0.5, default 6; notch — Notch length, 0.25–0.6, step 0.05, default 0.4
Greek Cross Lattice (greek-cross-lattice)tilingscell — Cell size (mm), 4–20, step 0.5, default 6; armLength — Arm length, 0.3–0.48, step 0.01, default 0.42
Deco Chevron Gold (deco-chevron-gold)tilingspitch — Row pitch (mm), 2–20, step 0.5, default 7; amplitude — Chevron height (mm), 1–16, step 0.5, default 6; thickness — Band thickness, 0.3–0.9, step 0.05, default 0.6
Valknut Grid (valknut-grid)tilingstile — Tile size (mm), 7–20, step 0.5, default 10; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.8; spread — Triangle spread, 0.1–0.35, step 0.01, default 0.2
Isometric Cube Grid (isometric-cube-grid)tilingscell — Cell size (mm), 3–20, step 0.5, default 6; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6
Ogee (ogee)tilingstileWidth — Tile width (mm), 6–20, step 0.5, default 8; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.6; domeHeight — Dome height, 0.8–2, step 0.05, default 1.25
Ammann Bar Grid (ammann-bars)tilingsspacing — Bar spacing (mm), 2–12, step 0.5, default 3.5; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.4
Cairo Pentagonal (cairo-pentagonal)tilingscell — Cell size (mm), 7–30, step 0.5, default 10; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5
Masu Tsunagi (masu-tsunagi)tilingscell — Cell size (mm), 5–30, step 0.5, default 8; nestCount — Nested squares, 2–6, step 1, default 3; lineWidth — Line width (mm), 0.1–3, step 0.05, default 0.5

Note

resolveParam は、ジェネレータが使う前にすべての値を宣言された [min, max] にクランプします。そのため、古い値や手編集された params の値(インポートした注文 JSON から来たものなど)が、描画ループを負や非有限に送り込むことはありません。ジェネレータ契約 → パラメータのクランプを参照してください。

パターンごとの補足(オリジナル 12 個)

以下の文章による補足は、手書きのオリジナル 12 個だけを対象にしています。移植した 50 個のパターンについて、その設計意図と pgen ソースから何を削ったか/どう翻訳したかは、各パターン自身のモジュール(packages/patterns/src/patterns/<name>.ts)の冒頭コメントと、pgen-port-ledger.json のその行にあります——上のpgen 移植の由来を参照してください。

Dot Grid

塗りつぶした円のグリッド。各円は半径 radius mm で、両軸方向に pitch mm 間隔で並び、パネルの中央に配置されます。

Diagonal Stripes

パネルの対角全長(width + height)にわたる 45° 対角の平行ストローク。アスペクト比にかかわらず領域が常に完全に覆われるようにし、pitch mm 間隔で並びます。

Grid Lines

素の直交格子。pitch mm ごとの垂直ストローク、続いて pitch mm ごとの水平ストロークで、いずれもパネルの中央に配置されます。

Concentric Circles

中心点 (width/2, height × centerY) から外側へ広がるリング。pitch mm 間隔で、その中心から最も遠い角まで描かれます。そのため、centerY が中心からずれていてもリングは常にパネルを完全に覆います。

Hex Lattice

尖った頂点を上にした六角形の輪郭からなるハニカム。差し渡し cell mm で、行がずれた格子(w = √3 × r の平坦面どうしの列間隔、1.5 × r の行間隔、隣り合う行を w の半分だけずらす)に配置されます。

Checker

塗りつぶした cell mm の正方形からなる市松模様。古典的な 2 色のグリッドパターンで、塗りつぶした正方形だけを描きます(「オフ」の正方形は、透けて見えるパネルの下地色です)。

Wave Lines

水平な正弦波の行。pitch mm 間隔で、各行は amplitude mm の縦揺れと wavelength mm の周期を持ちます。正弦波の位相はパネルの水平中心に固定されるため、どのパネル幅でも波が視覚的に中央に保たれます。

Crosshatch

互いに直角(45° と 135°)をなす 2 回の対角ストライプのパス。どちらも pitch mm 間隔で、Diagonal Stripes を 2 倍にして反転させたものです。

Radial Burst

中心点 (width/2, height × centerY) から伸びる count 本の直線の光線。中心から innerRadius mm 外側から始まり(内側に円形の空きを残す)、パネルの遠い角まで伸びます。

Brick

破れ目地(running bond)のレンガ積みパターン。高さ brickH mm の水平な段、brickW mm ごとの垂直な目地からなり、隣り合う行はレンガ幅の半分だけずれます。これは実際のレンガ積みが使うのと同じずらし方です。

Diamond Lattice

アーガイル調のダイヤモンド輪郭の領域(頂点間 size mm)。size/2 ずつずらした 2 つの噛み合う副格子に配置されるため、隣り合うダイヤモンドが辺を共有し、角に隙間を残さず継ぎ目なくタイリングされます。

Scallops

重なり合う下半円の弧(各 width mm)を、魚の鱗のように行から行へ入れ子にします。各行は水平方向にスカラップ幅の半分だけずれ、行は縦方向に半径 1 つ分(スカラップ幅の半分)ずつ積み重ねられます。

サムネイル

packages/patterns/src/thumbnail.ts は、パターンピッカーダイアログに表示されるピッカーカードのプレビューを描画します。renderPatternThumb(canvas, gen, sizePx) は次の処理を行います。

  1. CSS ボックスを sizePx に固定したまま、現在の devicePixelRatio に合わせてキャンバスのバッキングストアのサイズを決めます。

  2. 固定の 30mm ウィンドウ(THUMB_SPAN_MM)がバッキングストアをちょうど埋めるようコンテキストをスケールします。すべてのパターンのサムネイルが同じ物理的な範囲を切り取るため、pitch / cell のサイズが大きく異なるパターンどうしでも、一目で視覚的に比較できます。

  3. 背景を黒(#151515、パネルのソルダーマスク下地を反映)で塗り、ジェネレータの draw() を、固定の前景色(#d4af37、金 — 露出した銅を反映)と自身の defaultParams() で呼び出します。

サムネイルの 2 色は thumbnail.ts にローカルなリテラル定数で、@zpd/corePALETTE からインポートしていません。これは、@zpd/patterns パッケージが自己完結し、@zpd/core に依存しないままでいられるよう、意図的に重複させています。