Illustratorで描いたベクター画像をChat GPTを使ってp5.jsのベジェ曲線に変換

p5.js内で、Illustratorで描いた画像をベジェ曲線として扱ってみました。
https://youtu.be/2TTEZRURLB0

やり方：

1. Illustratorでイラストを書き、SVGに変換
2. Chat GPTに下記のようにお願いする

こちらを、p5.jsで描画してください

【テキストエディタ等でSVGを開き、中のテキストをそのまま貼り付ける】

すると、p5.jsでベジェ曲線描画するコードが返ってきます。

script.js

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255);
  strokeWeight(3);
  noFill();
  stroke(5);

  // SVGのpathを再現する
  beginShape();
  vertex(2.6, 74.82);
  bezierVertex(4.39, 66.36, 9.86, 57.76, 9.6, 51.82);
  bezierVertex(9.07, 39.6, 2.87, 37.83, 1.1, 25.82);
  bezierVertex(-0.82, 12.26, -0.4, -0.18, 9.6, -0.18);
  bezierVertex(17.56, -0.18, 29.33, 11.1, 28.6, 28.82);
  bezierVertex(28.29, 36.44, 28.15, 48.33, 31.15, 51.82);
  bezierVertex(34.08, 54.79, 40.45, 54.68, 44.15, 51.82);
  bezierVertex(48.2, 48.69, 47.77, 42.94, 48.15, 33.82);
  bezierVertex(49.15, 9.82, 51.29, -0.14, 54.15, -2.18);
  bezierVertex(59.22, -5.79, 68.83, -4.15, 73.15, 4.82);
  bezierVertex(80.58, 18.52, 58.06, 35, 65.15, 52.82);
  bezierVertex(69.12, 62.8, 77.89, 61.94, 80.15, 71.82);
  bezierVertex(82.77, 83.24, 74.8, 96.3, 65.15, 102.82);
  bezierVertex(49.16, 113.63, 17.06, 113.36, 7.15, 99.82);
  bezierVertex(-1.37, 88.19, 2.51, 74.86, 2.6, 74.82);
  endShape();
}

これで、p5.js内で自由にイラストを扱うことができるようになりました。

動画のサンプルコードはコチラです。