Parametric Pattern Plotter（PPP）

式で描くレザークラフト型紙CAD。寸法を変数と式で書けるパラメトリックな2D CADです。 index.html を1つ開くだけで動きます（インストール不要）。

▶ ブラウザで使う：https://amber-color.github.io/parametric-pattern-plotter/

できること

• 作図：矩形・円・直線（折れ線）・ベジェ曲線。グリッドスナップ（0.5 / 1 / 5 mm）
• 座標：CAD と同じく X は右、Y は上が正。矩形の X・Y は左下の角。原点に X（赤）・Y（緑）の矢印を表示（書き出しには出ない）
• パスの位置：パスにも X・Y があり、頂点はその点からの座標。ドラッグで動かすと X・Y だけが変わる（頂点の式はそのまま）。外装.右+10 のように式も書ける
• 回転：矩形・パス・演算結果を回転できます。パネルの「回転（度）」に角度（式も可）を入れるか、選択中の図形の上に出る丸いハンドルをドラッグ（Shiftで15°刻み）。反時計回りが正です
  • 回転中心は「回転中心X・Y」で指定。最初に回したときの図形の中心が自動で入ります。移動すると回転中心もついてきます
  • 回転中心の下の「クリックで指定」を押してキャンバスをクリックすると、その点が回転中心になります（グリッド・図形スナップが効き、ほかの図形の角などにスナップすると参照の式で入ります）。回転済みの図形はその場から動きません。Escでやめる
  • 回転した図形にもステッチ穴・辺ごとの設定・書き出し（SVG・DXF・PDF）がそのまま効きます。回転した矩形はキャンバスの伸縮ハンドルが出ないので、寸法はパネルで編集します
  • 回転した図形への図形スナップは、吸着はしますが数値で入ります（連動しません）
  • 演算結果を回したとき、材料は回転前の位置に表示されます
• 図形スナップ：作図・移動・ハンドル操作のとき、ほかの図形の点に吸着します。吸着先は水色の印と名前で表示
  • 端点（□）・中点（△）・中心（○）・円の四分点（◇）・交点（×）・線上（⧖）、図形の点と水平・垂直にそろう延長線（点線）
  • 図形の角を持ってドラッグすると、その角を基準に吸着（例：ポケットの右上の角を外装の右上の角に合わせる）
  • ステータスバーの「図形スナップ」か S キーで切り替え。Ctrl / ⌘ を押している間は一時的に吸着しません
• 連動スナップ：図形の点に吸着すると、座標が数値ではなく 外装.右 のようなその図形を参照する式で書き込まれます。参照先の図形が変数で動けば、吸着した図形・寸法線・頂点もついてきます（表示は「端点 · 連動」）
  • 矩形の片側の角だけが吸着したときは、その角に付いたまま大きさを保ちます。両側が吸着すると、その間に張ります
  • 延長線（そろえるだけ）の吸着は参照を作らず、数値になります
  • 参照先の図形を削除しようとすると、どこから参照されているかを表示して止めます。図形の名前を変えると参照も書き換わります

• 寸法線：寸法線ツールで始点と終点をクリックし、線の位置を決めてもう一度クリック。ステータスバーで角度・半径・直径の寸法線にも切り替えられる。図形の点に吸着すると連動スナップで参照式が入るので、変数で図形が変わっても寸法線が追従する。PDF・SVGでは線と数値を、DXFではDIMレイヤーに線と文字を出力
• テキスト：テキストツールでクリックした位置に文字を配置。文字・高さ・回転をパネルで編集でき、位置や高さにも式が書ける。PDFでは日本語もそのまま印刷でき、SVGは文字要素、DXFはTEXTレイヤーに出力
• 矩形の角：四隅共通、または角ごとに、角丸・面取り・直角をアイコンで選び（角ごとのときは、どの角かも図で表示）、大きさを式で指定。DXFでは角丸を正確な円弧、面取りを直線で出力
• 矩形・円をパスに変換：パーツ欄の「パスに変換」で、矩形や円を閉じたパスにする。式は残る（右上の頂点は X+幅 のように書かれる）ので変数を変えても形が追従し、線の上をダブルクリックで頂点を足せる。角丸は頂点の角R、面取りは2つの頂点、円は4つのベジェ曲線の頂点になる。式の中の 自分.… は元の式に書き直し、ほかの図形からの X・Y・直径・半径 の参照は 左・下・幅・幅/2 に書き換える
• ベジェ曲線：ベジェツールでクリックすると角の点、ドラッグすると曲線の点。頂点のダブルクリックで角⇔曲線の切り替え、線上のダブルクリックで頂点を追加。頂点をクリックで選択（Shiftで追加選択）し、Deleteで削除。ハンドルはドラッグで調整（Altで左右を独立。頂点もハンドルの先もグリッドに吸着）
• 線種と塗り：パーツ欄の「線種」で、実線・実線（細）・実線（赤）・破線・破線（細）・一点鎖線（シアン）から選ぶ（横に見本）。閉じた図形は「塗り」でハッチング（斜線・逆斜線・綾目・横線・縦線・点）かベタ（薄）を付けられ、間隔（mm、式も可）を指定できる。色は線種の色。左右・上下複製では斜線の向きも反転。書き出しでは線種ごとにグループ・レイヤーが分かれる
• 寸法を式で書ける：W、2*H、W+間 のように変数と式で寸法を指定。パスの頂点座標とハンドルにも式が書ける。変数を変えると全パーツが追従

• 分割（連動）：左のツールバーの分割ツール（K）。切りたい図形をクリックし、続けて切る線（開いた線）や切る図形をクリックして Enter（先に選んでからツールを押しても可）。線や図形の輪郭に沿って切れ、切れた部分がそれぞれ別の図形（ピース）になる
  • 各ピースは線種・塗りを個別に設定できる。元の図形と切る線は材料として薄く表示され、パーツ欄から選んで編集できる
  • ステッチ穴は演算と同じルール：元の図形か切る線のどれかで「穴を並べる」がオンなら、穴はそれらの設定のまま（分割しても変わらず、ピースでは設定できない）。全部オフなら、ピースごとに設定でき、各ピースの外形に沿って並ぶ。「パスに変換」すると、元の図形の辺ごとの設定をピースの辺に移す（切り口の辺は縫わない）
  • 元の図形や切る線を動かす・変数を変えると、ピースも作り直される（どのピースがどの部分かは位置で覚える）。ピースをドラッグすると元の図形と切る線ごと動く
  • 円などの閉じた図形で切ると、内側と外側（穴あき）に分かれる。線が図形を横切っていないと切れない
  • 「分割を解除」でピースを消して元に戻す。「パスに変換」で折れ線の図形に置き換え、使われなくなった元の図形と切る線は消える
• フィレット（角を丸める）：左のツールバーのフィレットツール（F）で、平行でない2本の線分を順にクリック。交わっていなくても2本を延長（はみ出していれば切り詰め）して交点でつなぎ、クリックした側を残して半径 R の円弧で角を丸める。R はステータスバーの欄で指定（式も可）。2本目にマウスを乗せると延長線と円弧のプレビューが出る。Esc で選び直し
  • 面取り：ステータスバーで「丸める」を「面取り」に変えると、円弧の代わりに直線で角を切り落とす（C は角から切り落とす長さ）。どの組み合わせでも丸めと同じように使え、あとからパネルの R / C ボタンで切り替えられる
  • 同じパスの隣り合う2辺：その頂点に角R が付く（パネルの頂点の表の「R」欄で変更・空欄で解除）。SVG・PDF では円弧（ベジェ曲線）のまま出力
  • 同じパスの離れた2辺：2辺を延長してつなぎ、間の辺を消す。実行後にパネルで「別の線として残す」か「消したままにする」を選べる
  • 別々の開いた線（直線・折れ線）2本：延長して1本の線につなぐ
  • 矩形の隣り合う2辺：その角の角R（角ごと）に入る
  • 演算結果・オフセットの隣り合う2辺：その角に角R が付き、パネルの「角R」欄で変更・削除できる。角は位置で覚えるので、変数で形が変わっても同じ角に付いたまま（形が大きく変わって外れたものは「外れ」と表示）
  • 円弧の部分も縫い代・ステッチ穴に反映され、丸めた角の中央で辺が区切られる

Shift＋クリックで複数選択し、合体・差・交差・排他。元の図形は「材料」として式付きのまま残り、変数を変えると演算結果も作り直される。「パスに変換」で座標を固定、「演算を解除」で元の図形に戻せる。演算結果をさらに演算の材料にすることも可能

• ステッチ穴：材料のどれかで「穴を並べる」がオンなら、穴は材料ごとの設定で決まり、演算結果からは変えられない（材料の穴は演算後もそのまま表示・書き出しされ、演算の名前の横には材料の穴の合計数）。材料がすべてオフなら、演算結果で穴を設定でき、仕上がりの外形に沿って並ぶ。材料はパーツ欄の材料一覧から選んで設定する
• 「パスに変換」すると、演算結果で設定した穴はそのまま、材料で設定した穴は変換後の外形の各辺に移す（材料の辺に沿った辺は、その辺の設定を引き継ぐ）

• オフセット（連動）：左のツールバーのオフセットツール（Shift＋O）で、選んだ図形を外側または内側に指定の距離だけずらした形を作る。図形を選んでからツールを押すとすぐに作成、何も選んでいなければ図形をクリック（Shift＋クリックで複数選んで Enter でも可）

  • パネルで「方向（外側 / 内側）」「距離（式も可）」「角の形（丸く / 尖らせる。既定は丸く）」を設定。角の形は外側では出っ張った角、内側では凹んだ角に効く
  • 複数の図形からは、合体・差・交差・排他の演算をしてからオフセットする（演算はパネルで切り替え。差は1番目の図形から残りを引く）。演算の図形は作らず、元の図形はそのまま残る
  • 元の図形を動かしたり変数を変えたりするとオフセットも作り直される。オフセットをドラッグすると元の図形ごと動く。オフセットに使われている図形は削除できない
  • オフセットにもステッチ穴を並べられ、書き出し（PDF・SVG・DXF）にも出る。円や角丸は細かい折れ線になる。「パスに変換」で今の形の折れ線に置き換えられる（元の図形は残る）

• ステッチ穴の自動配置：縫い代（縁から縫い線までの距離）・ピッチ・穴径を指定すると、縫い線を内側にオフセットして穴を配置。ピッチは変えず、角（30°以上の折れ。矩形の角丸・面取りはその中央）で区切った辺ごとに、角に必ず穴を置く

  • 余りの処理：自動（ずれが小さいほう）・詰める（短い間隔を1つ作る）・空ける（長い間隔を1つ作る）
  • 余りの位置：両端（余りを半分ずつ両端へ）・始点・中央（真ん中の間隔へ。穴が奇数で真ん中の間隔が2つあるときは、その2つに半分ずつ）・終点
  • 縫い線（点線）をクリックするとその辺を選べて、縫う／縫わない、ピッチ、余りの処理、余りの位置を辺ごとに上書きできる
  • 辺ごとの設定は辺の位置で記憶するので、頂点を足す・角の種類を変える・変数で形を変えるなどしても、同じ辺に付いたまま残る（形が大きく変わってどの辺にも当てはまらなくなった設定は、パネルに件数を表示）
  • 辺の途中を縫わない：辺を選んで「＋ 縫わない区間」を押し、始点からの位置と長さ（mm、式も可）を指定。1つの辺にいくつでも置け、区間の両端には縫い止まりの穴が入る（左右・上下複製では終点からの位置に切り替わり、同じ場所に付く）
  • 辺の一部だけ縫う：「始点から」「終点から」の距離（mm、式も可）で縫う範囲を指定。範囲の端には縫い止まりの穴が入る。キャンバスのハンドルでも調整できる
  • 指定ピッチと違う間隔は赤で表示し、パネルにその寸法と数を表示

• 画面構成：右側にパーツ欄と変数バーを横に並べて表示。パーツ欄は図形を選んでいるときだけ出る。変数バーは右上のボタンで折りたためる。スマホでは1画面に収まり、上半分が図面、下半分が選んだパーツの欄（何も選んでいないときは変数）になる
• 式の書き方：変数バーの見出し「変数」にマウスを乗せる（スマホではタップ）と、使える演算・関数・定数・図形の値の一覧が出ます。変数は見出し右の ＋ で追加
• 入力の候補：パネルや変数の式の欄で名前を打ち始めると、合う変数・図形・関数の候補が出ます（横に今の値）。↑↓ で選び Enter か Tab で入力、Esc で閉じる。図形を選ぶと続けて 右・幅 などその図形の値の候補が出ます。変数の式の欄では、その変数より上の変数だけが出ます

This is the beginning of the README. Read the rest at the original. Read the full README ↗