p5.embroiderでジェネラティブ刺繍

この記事は、Processing Advent Calendar 2025の19日目の記事です。

https://nkymut.github.io/p5-advent-2025/

p5.embroiderでジェネラティブ刺繍
1. 過去のアドベントカレンダー記事一覧
はじめに
p5.embroiderのワークフロー
作例：フラクタルクリスマスツリー 2025年版
まとめ

過去のアドベントカレンダー記事一覧

2024年の記事：p5.fab: p5.jsから3Dプリンタをコントロールする
2023年の記事：p5.svgでデジタル刺繍
2022年の記事：p5.jsとmicro:bit でフィジカルコンピューティング

はじめに

本記事では、p5.embroiderライブラリを使って刺繍データをp5.jsでジェネラティブにデザインする方法を紹介します。

2023年のp5アドベントカレンダーの記事では、p5.jsとInk/Stitchを組み合わせてデジタル刺繍をする方法を紹介しましたが、筆者が開発したp5.embroiderを使うことでp5.jsの描画から直接刺繍データを出力することができるようになりました。

blue lissajous pattern with embroidery

では、早速p5.embroiderを使って刺繍データを生成してみましょう。

p5.embroiderのワークフロー

p5.embroiderを使って刺繍データをデザインする手順は以下のようになります。

p5.embroiderのライブラリを読み込む
p5.jsのキャンバスをmm2px()関数を使ってmm単位で作成する
setDrawMode()関数を使って刺繍のプレビュー方式を設定する
beginRecord()とendRecord()で刺繍データを作成
setStrokeSettings(),setFillSettings()関数を使って刺繍の縫い間隔などの設定を行う
exportEmbroidery()で刺繍データを出力する
刺繍データを刺繍ミシンに読み込んで刺繍を行う
ミシンの出力結果を見て刺繍の設定を微調整する

1. p5.embroiderライブラリの読み込み

p5.embroiderを使うには、一般的なp5.jsのライブラリと同じように以下のスクリプトタグをHTMLファイルに追加します。

<!-- CDNを使用する場合： -->
<script src="https://unpkg.com/p5.embroider/lib/p5.embroider.js"></script>
<!-- GitHub Pagesを使用する場合： -->
<script src="https://nkymut.github.io/p5.embroider/lib/p5.embroider.js"></script>

サンプルコード

以下にp5.embroiderを使って刺繍データを生成するサンプルコードを示します。

このコードでは、100mm x 100mmのキャンバス上に、ジグザグ縫いで80mm x 80mmの矩形を刺繍します。

  // 100mm x 100mmのキャンバスを作成する
  createCanvas(mmToPixel(100), mmToPixel(100));

  background(200);

  setDrawMode("realistic"); // プレビューモードの指定

  beginRecord(this); // 刺繍データの作成を開始
  translate(10,10);

  setStrokeSettings({　// 刺繍線描の設定
    stitchLength: 0.5, // スティッチの長さ
    stitchWidth: 0.2, // スティッチの幅
    noise: 0.0, // ランダム係数
    strokeInterpolate: true, // ストロークの補間を有効にする
  });
  stroke(0, 220, 220); // ストロークの色を設定
  strokeWeight(5); // ストロークの太さを設定
  setStrokeMode("zigzag"); // ストローク幅の刺繍モードをジグザグ縫いに設定
  
  rect(0, 0, 80, 80); // 80mm x 80mmの矩形を描画
  trimThread(); // 糸切り命令を挿入

  endRecord(); // 刺繍データの作成を終了する

  exportEmbroidery("simple.dst"); // TAJIMA DSTファイルを出力する

2. p5.jsのキャンバスの作成

キャンバスの作成は、通常通りcreateCanvas関数を使います。

p5.embroiderでは、実寸の刺繍データを作成するために、サイズ指定にpixelではなくmm単位を使用します。

そのためmmToPixel()関数を使ってキャンバスのサイズをmm単位で指定し、pixel単位に変換します。

createGraphics()関数を使う場合も同様にmm単位で指定します。

 // 100mm x 100mmのキャンバスを作成する
createCanvas(mmToPixel(100), mmToPixel(100));

// 100mm x 100mmのp5グラフィックインスタンスを作成する
let pg = createGraphics(mmToPixel(100), mmToPixel(100)); 


// 単位変換関数　一覧

mmToPixel(100); // 100mmをpixelに変換する
mm2px(100); // 短縮形　

pixelToMm(100); // 100pixelをmmに変換する
px2mm(100); // 短縮形　

3. プレビューモードの設定

setDrawMode("stitch"); // 刺繍モードをツールパス描画モードに設定

p5.embroidrはp5.jsの描画方式のほかに、刺繍の見た目や刺繍ミシンの針の動きをプレビューするプレビューモードをサポートしています。

setDrawMode()関数を使って刺繍描画のプレビューモードを切り替えることができます。

現在サポートしているプレビューモードは以下の3つです。

“stitch” : 刺繍のツールパス描画モード
“p5” : p5.jsの描画モード
“realistic” : 刺繍シミュレーションモード

4. 刺繍データの作成：beginRecord(), endRecord()

刺繍データの作成は、beginRecord()とendRecord()で囲んだ範囲で行います。

この範囲内のp5.jsの描画関数（ellipse()やrect()など）はp5.embroiderの刺繍描画として解釈されて、先に指定したプレビューモードに従って描画されます。

この範囲内では描画関数の引数がmm単位で解釈されるので、刺繍の実寸を使ってデザインすることができます。

使い慣れたp5.jsの描画関数や既存のp5スケッチをほぼ変更することなしに、刺繍デザインとして活用することができます。これがp5.embroiderの大きな特徴です。

ただし、2025年12月時点では、text()関数はサポートされていません。サポートされている関数の状況はGitHubのこのIssuehttps://github.com/nkymut/p5.embroider/issues/2を参照してください。もちろんPRも大歓迎です。

beginRecord()とendRecord()で囲まれた範囲外では、 p5.jsの描画関数は、通常通りキャンバスに描画されるので、 UIやその他アニメーションなどの描画を行うことができます。この際のパラメーターはpixel単位で解釈されるので、もし刺繍データと同じ位置関係で描画したい場合は、mmToPixel()関数を使ってmm単位に変換してください。

beginRecord(this);
    // 刺繍データの作成
    // x:50mm, y:50mm, width:50mm, height:50mmの円を刺繍データとして記録する
    ellipse(50, 50, 50, 50); 
endRecord();

// x:50px, y:50px, width:50px, height:50pxの円をキャンバス上に描画する
ellipse(50, 50, 50, 50); 

5. 刺繍パラメーターの設定: setStrokeSettings(), setFillSettings()

刺繍の描画ができたら、次に、刺繍の縫い間隔や塗りつぶしの設定などを行います。

線縫いの設定: setStrokeSettings()

通常のp5.jsの描画関数と同じようにstroke()関数による線描の刺繍パラメーターは、 setStrokeSettings()関数を使って設定します。 p5のstrokeWeight()関数による線の太さは、刺繍の幅(mm)になります。

ストロークの縫い方は、現在のところ直線縫い、ジグザグ縫い(三角、矩形)、並行縫い、刺子風縫いがサポートされています。

stroke(0, 0, 200); // ストロークの色を設定
strokeWeight(5); // ストロークの太さを5mmに設定

// ストローク幅の刺繍モードをジグザグ縫いに設定
// "straight": 直線縫い
// "zigzag"  : ジグザグ縫い
// "parallel": 並行縫い
// "sashiko" : 刺子風縫い
setStrokeMode("zigzag"); 

// ストロークの刺繍パラメータを設定
setStrokeSettings({
  stitchLength: 0.5, // スティッチの長さ
  stitchWidth: 0.2, // スティッチの幅
  noise: 0.0, // ランダム係数
  strokeInterpolate: true, // ストロークの補間を有効にする
});


// 短縮形：
//　スティッチの最短、長さ、ランダム係数の設定
setStitch(0.1, 0.2, 0); 
// スティッチの幅を設定
setStitchWidth(0.2); 

塗りつぶしの設定: setFillSettings()

ストロークと同様に、fill()関数で色を設定した後、 setFillSettings関数を使って塗りつぶしの刺繍パラメータを設定することができます。

塗りつぶし方法として、タタミ縫い、サテン縫い、螺旋縫いが現在サポートされています。

fill(220, 220, 0); // 塗りの色を設定

// 塗りの刺繍パラメータを設定
setFillSettings({
  angle: 45, // 塗りの角度を設定
  stitchLength: 0.5, // スティッチの長さ
  stitchWidth: 0.2, // スティッチの幅
  rowSpacing: 0.8, // スティッチの間隔を設定
  resampleNoise: 0.0, // ランダム係数
});

// 塗りつぶしモードを設定
// "tatami": タタミ縫い
// "satin": サテン縫い
// "spiral": 螺旋縫い
setFillMode("tatami"); 

糸の切り離し：trimThread()

糸の切り離しは、trimThread()関数を使って行います。この関数を使うことで、刺繍パスに糸切り命令を挿入することができます。

trimThread();

刺繍パスの幅を変化させる: vertex, vertexWidth

パスに沿って刺繍の幅を変化させるためには、 vertex(x,y,z)のz座標をジグザグ刺繍の幅として使用することができます。

p5.embroiderで新たに追加したvertexWidth()関数を使用することもできます。

これにより、例えばベースボールキャップの刺繍や書道のような刺繍デザインの生成が容易になります。

setStrokeMode("zigzag");
beginShape();
vertex(10, 10, 1); //1mm 幅
vertex(30, 10, 5); //5mm 幅
vertex(50, 10, 8); //8mm 幅
vertex(70, 10, 5); //5mm 幅
vertex(90, 10, 1);
endShape();

6. 刺繍データの出力：exportEmbroidery()

最後にexportEmbroidery()関数を呼ぶことで、記録された刺繍データがファイルとして出力されます。

描画した刺繍データはstroke()とfill()で指定した色ごとに、別々の刺繍パスとして記録されます。これによって、同じ色の刺繍パスをまとめて刺繍することができます。

もし刺繍の順番を指定したいときは色の数値を小さい順に並べることで、刺繍の順番を指定することができます。

出力形式は、TAJIMA DSTファイル、G-code、SVG、PNGがサポートされています。

exportEmbroidery("simple.dst"); // TAJIMA DSTファイルを出力する
exportEmbroidery("simple.gcode"); // Gコードを出力する
exportEmbroidery("simple.svg"); // SVGを出力する
exportEmbroidery("simple.png"); // PNGを出力する

出力したファイルを刺繍ミシンやDIY刺繍機に読み込むことで刺繍を行うことができます。

筆者の環境では、BERNINA,　Brother, E-lucky　の刺繍ミシンでTAJIMA DSTファイルが読み込めました。

ここでは詳しく触れませんが、刺繍データを紙に印刷して、手刺繍やパンチニードルによる刺繍を行うという方法もあります。

作例：フラクタルクリスマスツリー 2025年版

というわけで、駆け足で、p5.embroiderによる刺繍デザインの作成方法を紹介しました。ここで、作例として 2023年のアドベントカレンダーで作成したフラクタルクリスマスツリーをp5.embroiderを使ってアップデートしてみましょう。

2025年らしくAI(Sonnet3.5)に2023年のコードと以下のプロンプトを与え、さらにバイブコーディングしてこのような感じになりました。

please update the fractal xmas tree generation code to
use the vertex(x, y, w) format, and make the branch edge narrower and the end wider, yet not collide with other branches.
use a satin stitch for the star to make it more shiny.
add white stars around the tree using stroke stitches. 

$fractal xmas tree embroidery ver.02$

まとめ

本記事では、p5.embroiderを使ってデジタル刺繍データをp5.jsでジェネラティブにデザインする方法を紹介しました。

ここで触れられなかったサンプルや、ドキュメント類は以下のURLから参照できます。

p5.embroiderは、まだ初期アルファ段階なので、まだサポートしきれていない関数やバグがたくさんあります。希望する機能があったり、バグを見つけたりした場合は、ぜひお気軽に以下のIssuehttps://github.com/nkymut/p5.embroider/issues/までご報告ください。

開発に参加したいという方も絶賛募集中です！こちらもぜひお気軽にPRを送ってください。

それではよい年末を！