フォントのアウトラインを乱数にする

# Catmull-Rom スプライン
まずは、curveの使い方の確認。始点と終点は2回定義すると、描いてくれる。

```java
size(512, 128);
background(255);

beginShape();
curveVertex(0, 0);
curveVertex(0, 0);
curveVertex(100, 100);
curveVertex(200, 0);
curveVertex(300, 100);
curveVertex(400, 0);
curveVertex(500, 100);
curveVertex(500, 100);
endShape();
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/e4e76269-387c-6a34-e91f-b5cdfb853091.png)

# Aのベクターデータを用意する
イラレでAという文字をアウトライン化し、SVGフォーマットで保存し、テキストエディタで開く。保存せずとも、SVGコードを押せば、確認可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/15c8b9f3-d9cb-407f-ec60-4c9a7b61031a.png)

path=に続く部分から、座標値に関する部分を抜き出す。

:::note
SVG意味は下記を参照するといいかも。
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_03.htm
MはMoveTo
LはLineTo
HとVは垂直水平線
zは閉じる
M,L,H,Vなどの大文字は、絶対座標。
ｍ,ｌ,ｈ,ｖなどの小文字は、相対座標。
:::

例えば、文字Aの外側のアウトラインは以下のように保存されている。
```
M50.6,483.6L223,34.8h64l183.7,448.8H403l-52.3-135.9H163l-49.3,135.9H50.6z
```
https://yqnn.github.io/svg-path-editor/
上記のサイトを使えば、このSVGについて、操作することが簡単になる。
相対値を絶対値に変換したものが以下。変換はクリックするだけ。
```
M 50.6 483.6 L 223 34.8 H 287 L 470.7 483.6 H 403 L 350.7 347.7 H 163 L 113.7 483.6 H 50.6 z
```
さらに、HとVをLに変換したものが以下。変換は、convert toから選択するだけ。
```
M 50.6 483.6 L 223 34.8 L 287 34.8 L 470.7 483.6 L 403 483.6 L 350.7 347.7 L 163 347.7 L 113.7 483.6 L 50.6 483.6 z
```

# Aのアウトラインを乱数で揺らしながら、重ね書きする

この数字を元に配列を初期化して、processingのcurveで描く。
```java
size(512, 512);
background(255);

float[][] xy = 
{
  { 50.6, 483.6},
  {223.0,  34.8},
  {287.0,  34.8},
  {470.7, 483.6},
  {403.0, 483.6},
  {350.7, 347.7},
  {163.0, 347.7},
  {113.7, 483.6},
  { 50.6, 483.6}
};

beginShape();
curveVertex(xy[0][0], xy[0][1]);
for(int i=0; i<9; i++){
  curveVertex(xy[i][0], xy[i][1]);
}
curveVertex(xy[8][0], xy[8][1]);
endShape();
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/609b13a2-e5d0-1ceb-88de-d6cfd9106ada.png)

さらに、乱数でちょっとずつずらしながら、10回、重ね書きする。
鉛筆で何回も重ね書きするイメージ。

```java
size(512, 512);
background(255);

float[][] xy = 
{
  { 50.6, 483.6},
  {223.0,  34.8},
  {287.0,  34.8},
  {470.7, 483.6},
  {403.0, 483.6},
  {350.7, 347.7},
  {163.0, 347.7},
  {113.7, 483.6}
};

strokeWeight(0.2);
beginShape();
curveVertex(xy[0][0], xy[0][1]);
for (int n=0; n<10; n++) {
  for (int i=0; i<8; i++) {
    float rx = random(-10, 10);
    float ry = random(-10, 10);
    curveVertex(xy[i][0]+rx, xy[i][1]+ry);
  }
}
endShape();
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/e2c5e14b-1eae-5a7d-6816-29ba97946542.png)

# Bのアウトラインを乱数で揺らしながら、重ね書きする

Bは曲線が含まれるので、Aのようにはいかない。svgには曲線命令cが入ってくる。
ただ、あんまり細かくても意味ないと思うので、c命令は最後の座標のみ利用した。変換はconvert to LineToを選択するのみ。

```java
size(512, 512);
background(255);

float[][] xy =
  {
  { 101.9, 471.0},
  { 101.9, 31.6},
  { 266.8, 31.6},
  { 347.6, 44.9},
  { 395.3, 86.0},
  { 412.5, 144},
  { 397.2, 197.1},
  { 351.0, 237.3},
  { 412.3, 277.2},
  {433.7, 343.7},
  {420.7, 401.1},
  {388.5, 442.0},
  {340.4, 463.7},
  {269.5, 471.0}
};

strokeWeight(0.2);
beginShape();
curveVertex(xy[0][0], xy[0][1]);
for (int n=0; n<10; n++) {
  for (int i=0; i<14; i++) {
    float rx = random(-10, 10);
    float ry = random(-10, 10);
    curveVertex(xy[i][0]+rx, xy[i][1]+ry);
  }
}
endShape();
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/ea5b2a78-0c3d-a060-b0cc-9070ed97d67c.png)

```java
size(512, 512);
background(255);

float[][] xy =
  {
  { 394.8, 315.6},
  { 451.6, 330},
  { 387.3, 436.8},
  { 273.8, 473.6},
  { 160.9, 445.3},
  { 94.7, 363.4},
  { 72, 248.2},
  { 97.6, 131.2},
  { 170.5, 55.3},
  { 274.7, 29.4},
  { 383.1, 62.2},
  { 444.3, 154.5},
  { 388.3, 167.7},
  { 344.9, 99.4},
  { 273.5, 78},
  { 190.7, 101.7},
  { 144, 165.4},
  { 130.5, 247.9},
  { 146.5, 343.6},
  { 196.2, 404.7},
  { 269.1, 424.9},
  { 350, 397.4}
};

strokeWeight(0.2);
beginShape();
curveVertex(xy[0][0], xy[0][1]);
for (int n=0; n<10; n++) {
  for (int i=0; i<22; i++) {
    float rx = random(-10, 10);
    float ry = random(-10, 10);
    curveVertex(xy[i][0]+rx, xy[i][1]+ry);
  }
}
endShape();
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/1c69cad0-42ce-28c0-8df1-6def48532439.png)


あ
冗長。ずいぶん長くなってしまった。
変換プログラムしたほうが良さそう。
```java
size(512, 512);
background(255);

float[][] xy1 = {
  { 86.6, 149.7},
  { 84.7, 106.3},
  { 184.7, 107.2},
  { 187, 41.3},
  { 247.7, 45.5},
  { 235.1, 55.3},
  { 231.8, 105.7},
  { 408, 86.6},
  { 412.7, 131.4},
  { 244, 150},
  { 233, 201},
  { 307.6, 197.7},
  { 311.8, 176.7},
  { 357.6, 188.4},
  { 353.9, 204.7},
  { 458.5, 323.8},
  { 280, 460.8},
  { 261.3, 422.5},
  { 409.8, 326.3},
  { 338.8, 246},
  { 248.2, 374.9},
  { 257.1, 395},
  { 219.3, 419.8},
  { 210, 400.2},
  { 119, 428},
  { 55, 296},
  { 161, 223},
  { 169, 159}
};

float[][] xy2 = {
  { 198.7, 359.4},
  { 186.6, 262.2},
  { 108, 310},
  { 140.3, 384.6}
};

float[][] xy3 = {
  { 293.6, 238.4},
  { 229.1, 247.3},
  { 237, 326.7}
};

strokeWeight(0.2);
beginShape();
curveVertex(xy1[0][0], xy1[0][1]);
for (int n=0; n<10; n++) {
  for (int i=0; i<28; i++) {
    float rx = random(-10, 10);
    float ry = random(-10, 10);
    curveVertex(xy1[i][0]+rx, xy1[i][1]+ry);
  }
}
endShape();

beginShape();
curveVertex(xy2[0][0], xy2[0][1]);
for (int n=0; n<10; n++) {
  for (int i=0; i<4; i++) {
    float rx = random(-10, 10);
    float ry = random(-10, 10);
    curveVertex(xy2[i][0]+rx, xy2[i][1]+ry);
  }
}
endShape();

beginShape();
curveVertex(xy3[0][0], xy3[0][1]);
for (int n=0; n<10; n++) {
  for (int i=0; i<3; i++) {
    float rx = random(-10, 10);
    float ry = random(-10, 10);
    curveVertex(xy3[i][0]+rx, xy3[i][1]+ry);
  }
}
endShape();
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/9f58a8c8-15b1-37d2-2a8f-c03747ce93b4.png)


これをフォント登録してみたいが、ひと手間かかりそうだ。
動くフォントにしよう。

Variable Fonts（可変フォント）もいい
https://v-fonts.com/

これもいい
https://nixeneko.hatenablog.com/entry/2017/06/07/015601

おわり

時間があったら、D以降もやりたいが、少し自動化必要だなぁ。