Processingで刺繍図案を作る

2022年12月13日 01:10

本記事は、Processing Advent Calendar 2022の13日目の記事です。

はじめに

　こんにちは、Yusukeです。私は普段はアパレル製造の仕事をしていて、仕事後や週末などの空いた時間に趣味でProcessing, p5.jsでのクリエイティブ・コーディングを楽しんでいます。なので時々コーディングが服や雑貨などと結び付かないかなと考えることがあります。そしてコードを書いたり、様々なチュートリアルやみなさんの作品を見てる中、サークルパッキングの円をビーズにして刺繍してみようと思いました。

コーディング（図案作り）

こちらのチュートリアルを参考にしてコードを書きました。

　サークルパッキング自体は以前に何回かやってみたことはありますが、忘れていたりその時完全に理解できなかったこともあるので、理解を深めるために下記の書籍、記事も参考にしました。

　まず元のモチーフを作ります。今回はProcessingのイニシャルの "P" にしました。下記の通りシンプルに四角を組み合わせて作りました。

void setup() {
  size(600, 600);
}

void draw() {
  background(0);
  noStroke();
  fill(255);
  rect(220, 120, 200, 200);
  fill(0);
  rect(220, 170, 150, 100);
  fill(255);
  rect(140, 120, 50, 400);
}

　続いて上の画像の白い部分に円を当て込んでいきます。円の大きさはビーズの径の比率にします。この時点で刺繍するものやサイズなどはおおよそ決めておきます。今回はキャップに刺繍することにしたのですが、モチーフ全体の大きさがそこまで大きくないのと径が1mm違うだけで意外と見え方に違いがあるため2mm,3mm,4mmの３種類のビーズを使うことにしました。こればかりはデザインや好みなので5mm,6mmなどがあってもいいと思います。色々試しながら様々な結果を見るのもクリエイティブ・コーディングの魅力です。

　そして、キャンバスサイズや円のサイズ、個数を何度か試して決めたサークルパッキングのコードが下記になります。円の中心には印を付けるための点を打っておきます。
　ちなみに、今回Windows11 のフォトアプリで印刷したのですが解像度の設定がわからず、とりあえず4倍したらそのサイズで印刷されるのでこのようになってます。アプリの設定の問題か家にあるプリンタが安くて古いものだからなのか設定方法分かりませんでした。印刷自体久々にしました。とりあえずpixelからmmに移行できたので良しとします。

ArrayList<PVector> circles;
ArrayList<PVector> spots;
PImage img;

void setup() {
  size(200, 200);  //印刷の解像度を考慮してサイズを決める。
  
  circles = new ArrayList<PVector>();
  spots = new ArrayList<PVector>();

  img = loadImage("P.png");  //上のコードで作った画像
  img.resize(width, height);
  image(img, 0, 0);
  img.loadPixels();
  for (int x = 0; x < img.width; x++) {
    for (int y= 0; y < img.height; y++) {
      int index = x + y * img.width;
      color c = img.pixels[index];
      float b = brightness(c);
      if (b > 1) {
        spots.add(new PVector(x, y));
      }
    }
  }
}

void draw() {
  background(255);

  addCircle();
  for (int i = 0; i < circles.size(); i++) {
    PVector c = circles.get(i);
    noFill();
    stroke(0);
    circle(c.x, c.y, c.z);
    point(c.x, c.y);
  }
}

void addCircle() {
  while (circles.size() < 50) {  //円の数
    int r = int(random(0, spots.size()));
    PVector spot = spots.get(r);
    float x = spot.x;
    float y = spot.y;
    float[] dia = {2, 3, 4};  //ビーズの直径
    PVector c = new PVector(x, y, dia[int(random(3))] * 4);
//解像度を考慮してプリントサイズの調整。今回は４倍。
    boolean overlapping = false;

    for (PVector other : circles) {
      if (dist(c.x, c.y, other.x, other.y) < (c.z / 2 + other.z / 2)) {
        overlapping = true;
        break;
      }
    }
    if (!overlapping) {
      circles.add(c);
    }
  }
}

さらに好みのデザインになるまで実行を繰り返します。
そして下の通り図案ができました。

刺繍

ここからビーズを付けていきます。

材料

ビーズ（貴和製作所）
刺繍糸（貴和製作所）
キャップ（GU）

針などの道具は家にあるものを使いました。

工程

まず印刷した図案の円の中心に目打ちを使って穴をあけます。

刺繍位置を決め図案を固定しチャコペンを使って印を付けていきます。

後は図案を見てサイズを確認し、ひたすらビーズを付けていきます。

完成！

まとめ

　自分らしいデジタルとアナログの混ざった作品ができました。平面の円に球体のビーズを付けているので多少見え方に違いはあるものの、コードで試行錯誤した結果を刺繍というまた違ったクリエイティブなものに落とし込むことができ満足しています。今回はアルファベットに丸いビーズを使いましたが、モチーフを絵や図形にしたり、ビーズを四角いものにしたり、色数を増やしたり、やり方はいかようにも広がるのでまたやりたいです。みなさんもファストファッションや着なくなった服のアクセントとしてやってみてはいかがでしょうか。

最後に

　今回の作品づくりの支えとなったコード、チュートリアル、記事を公開して下さっている皆様にお礼申し上げます。そして普段SNSやコミュニティを通じて作品や情報をシェアし表現への刺激を下さっている皆様にも感謝致します。来年もクリエイティブ・コーディング楽しみます！

この記事が気に入ったらサポートをしてみませんか？