Catmull-Rom スプライン
まずは、curveの使い方の確認。始点と終点は2回定義すると、描いてくれる。
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();
Aのベクターデータを用意する
イラレでAという文字をアウトライン化し、SVGフォーマットで保存し、テキストエディタで開く。保存せずとも、SVGコードを押せば、確認可能。
path=に続く部分から、座標値に関する部分を抜き出す。
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で描く。
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();
さらに、乱数でちょっとずつずらしながら、10回、重ね書きする。
鉛筆で何回も重ね書きするイメージ。
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();
Bのアウトラインを乱数で揺らしながら、重ね書きする
Bは曲線が含まれるので、Aのようにはいかない。svgには曲線命令cが入ってくる。
ただ、あんまり細かくても意味ないと思うので、c命令は最後の座標のみ利用した。変換はconvert to LineToを選択するのみ。
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();
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();
あ
冗長。ずいぶん長くなってしまった。
変換プログラムしたほうが良さそう。
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();
これをフォント登録してみたいが、ひと手間かかりそうだ。
動くフォントにしよう。
Variable Fonts（可変フォント）もいい
https://v-fonts.com/
これもいい
https://nixeneko.hatenablog.com/entry/2017/06/07/015601
おわり
時間があったら、D以降もやりたいが、少し自動化必要だなぁ。