型くりこ「Bezier Glyph/ベジェグリフ」について

2023年1月1日

型くりこについてはこちらをご覧ください。

「Bezier Glyph/ベジェグリフ」について

直線やベジェ曲線などを使って、架空の文字のような記号を描く技法です。

座標や位置などにある程度ルールを設け、そのルールの中でランダムさを入れた線を描くことで見た目が文字っぽくなります。作品のアクセントやワンポイントとして使いやすいので私もよく使用しています。フォントの著作権なども気にしなくてよいですしね。

Asemic writingという概念があるようでして、おそらくそこに属する技法になるのかと思います。

使い方

ルールを用意し、そのルールの中でrandom()やnoise()を利用して座標を決めて線を引きます。

今回は「円状に60度ごとの点があるとして、そこからランダムに二つの点を選んで線を引く」というルールにしてみます。

ちなみに縦長にすると、より文字っぽくなります。

円状に60度ごとに点があるとして、いずれかの点を2つ選んで直線を複数本描くと、その組み合わせが文字のように見える。

void setup(){

size(720, 720, P2D);

background(192);

noFill();

for(int x = 0; x < width; x+= 60){

for(int i = 0; i < 4; i++){

float r1 = int(random(6)) * PI / 3; // 60度上のいずれかの点を選ぶ

float r2 = int(random(6)) * PI / 3;

float px1 = cos(r1) * 30 + x;

float py1 = sin(r1) * 60 + height /2;

float px2 = cos(r2) * 30 + x;

float py2 = sin(r2) * 60 + height /2;

line(px1, py1, px2, py2);

}

function setup(){

createCanvas(720, 720);

background(192);

noFill();

for(var x = 0; x < width; x+= 60){

for(var i = 0; i < 3; i++){

var r1 = int(random(6)) * PI / 3; // 60度上のいずれかの点を選ぶ

var r2 = int(random(6)) * PI / 3;

var px1 = cos(r1) * 30 + x;

var py1 = sin(r1) * 60 + height /2;

var px2 = cos(r2) * 30 + x;

var py2 = sin(r2) * 60 + height /2;

line(px1, py1, px2, py2);

}

0度と180度の位置（円状の右と左）は隣の円状と重なる位置にしていて、その線の繋がりも文字っぽさを想起させる。

円状の60度ごとの位置に円を描いてみると、各直線がルール（いずれかの円から円へ線を引く）に沿って引かれていることがわかる。

追加説明

直線ではなく曲線を使用するとより手書きの文字っぽくなります。今回はベジェ曲線を使用してみます。

void setup(){

size(720, 720, P2D);

background(192);

noFill();

for(int x = 0; x < width; x+= 60){

for(int i = 0; i < 3; i++){

float r1 = int(random(6)) * PI / 3; // 60度上のいずれかの点を選ぶ

float r2 = int(random(6)) * PI / 3;

float rc1 = int(random(6)) * PI / 3;

float rc2 = int(random(6)) * PI / 3;

float px1 = cos(r1) * 30 + x;

float py1 = sin(r1) * 60 + height / 2;

float px2 = cos(r2) * 30 + x;

float py2 = sin(r2) * 60 + height / 2;

float cx1 = cos(rc1) * 30 + x;

float cy1 = sin(rc1) * 60 + height / 2;

float cx2 = cos(rc2) * 30 + x;

float cy2 = sin(rc2) * 60 + height / 2;

bezier(px1, py1, cx1, cy1, cx2, cy2, px2, py2);

}

function setup(){

createCanvas(720, 720);

background(192);

noFill();

for(var x = 0; x < width; x+= 60){

for(var i = 0; i < 3; i++){

var r1 = int(random(6)) * PI / 3; // 60度上のいずれかの点を選ぶ

var r2 = int(random(6)) * PI / 3;

var rc1 = int(random(6)) * PI / 3;

var rc2 = int(random(6)) * PI / 3;

var px1 = cos(r1) * 30 + x;

var py1 = sin(r1) * 60 + height / 2;

var px2 = cos(r2) * 30 + x;

var py2 = sin(r2) * 60 + height / 2;

var cx1 = cos(rc1) * 30 + x;

var cy1 = sin(rc1) * 60 + height / 2;

var cx2 = cos(rc2) * 30 + x;

var cy2 = sin(rc2) * 60 + height / 2;

bezier(px1, py1, cx1, cy1, cx2, cy2, px2, py2);

}

`bezier()`の第3～6引数のコントロールポイントによって複雑な曲線が描かれる。

応用編

文字の配置を工夫することで様々に応用が可能です。例えば下記の型くりこ「Archimedes’ Spiral/アルキメデスの螺旋」と組み合わせることができます。

型くりこ「Bezier Glyph/ベジェグリフ」を型くりこ「Archimedes’ Spiral/アルキメデスの螺旋」を使って配置してみた例。

void setup(){

size(720, 720, P2D);

background(192);

noFill();

for(float r = 0; r < TAU * 9; r += 0.1){

for(int i = 0; i < 3; i++){

float r1 = int(random(6)) * PI / 3;

float r2 = int(random(6)) * PI / 3;

float rc1 = int(random(6)) * PI / 3;

float rc2 = int(random(6)) * PI / 3;

float px1 = cos(r1) * 10;

float py1 = sin(r1) * 20;

float px2 = cos(r2) * 10;

float py2 = sin(r2) * 20;

float cx1 = cos(rc1) * 10;

float cy1 = sin(rc1) * 20;

float cx2 = cos(rc2) * 10;

float cy2 = sin(rc2) * 20;

push();

translate(cos(r) * r * 9 + width / 2, sin(r) * r * 9 + height /2);

rotate(r + PI / 2); // 右側から開始するため90度回転する

bezier(px1, py1, cx1, cy1, cx2, cy2, px2, py2);

pop();

}

function setup(){

createCanvas(720, 720);

background(192);

noFill();

for(var r = 0; r < TAU * 9; r += 0.1){

for(var i = 0; i < 3; i++){

var r1 = int(random(6)) * PI / 3;

var r2 = int(random(6)) * PI / 3;

var rc1 = int(random(6)) * PI / 3;

var rc2 = int(random(6)) * PI / 3;

var px1 = cos(r1) * 10;

var py1 = sin(r1) * 20;

var px2 = cos(r2) * 10;

var py2 = sin(r2) * 20;

var cx1 = cos(rc1) * 10;

var cy1 = sin(rc1) * 20;

var cx2 = cos(rc2) * 10;

var cy2 = sin(rc2) * 20;

push();

translate(cos(r) * r * 9 + width / 2, sin(r) * r * 9 + height /2);

rotate(r + PI / 2); // 右側から開始するため90度回転する

bezier(px1, py1, cx1, cy1, cx2, cy2, px2, py2);

pop();

}

その他作品

型くりこ「Bezier Glyph/ベジェグリフ」の考え方を使った作品をいくつか紹介いたします。

#つぶやきProcessing になってしまっているので、コードは圧縮されている箇所が多いですが、基本的な考え方は本記事に記載した内容と同等です。

int x,y,i;
size(720,720);noFill();strokeWeight(5);for(y=36;y<720;y+=72){line(0,y+36,720,y+36);for(x=18;x<720;x+=36)for(i=0;i<random(7);i++)bezier(x,y+(int(random(3))-1)*26,x-9,y+random(8)-4,x+9,y+random(8)-4,x+(int(random(3))-1)*20,y+(int(random(3))-1)*26);}#つぶやきProcessing pic.twitter.com/yMEycFLR3D
— はぅ君 (@Hau_kun) February 23, 2020

float r,i;
size(720,720);noFill();for(r=TAU;r<TAU*8;r+=PI/4/(++i+r*.5)){resetMatrix();translate(cos(r)*r*10+360,sin(r)*r*10+360);rotate(r+PI/2);for(i=0;i<random(6);i++){bezier(0,0,0,0,0,random(9),(int(random(3))-1)*8,(int(random(3))-1)*20);line(-3,30,3,30);}}#つぶやきProcessing pic.twitter.com/Dc9pgr0Vhb
— はぅ君 (@Hau_kun) February 26, 2020

float x,y,i;
size(720,720);clear();stroke(-1);strokeWeight(2);noFill();for(y=0;y<720;y+=60)for(x=y/60%2*30-60;x<720;x+=60)for(i=3;i>0;i–){circle(x+30,y+30,i*8+30);bezier(x+20,y+random(20)+20,x+int(random(3))*9+20,y+i*10+9,x+40,y+i*10+9,x+40,y+random(20)+20);}#つぶやきProcessing pic.twitter.com/2O0xL2gXsz
— はぅ君 (@Hau_kun) March 7, 2020

t=0
draw=_=>{t++||createCanvas(W=720,W)
noFill()
background(W)
F=(s,a=0)=>sin(int(noise(x+y+int(t/40)*40,i,s)*9-a)*PI/3)*40
for(y=0;y<W;y+=99)for(x=0;x<800;x+=40)for(i=0;i<4;i++)bezier((X=x-t%40)+F()/4,y+F(),X+F(3),y-F(3),X-F(6,2),y+F(6),X+F(9)/4,y+F(9))}#つぶやきProcessing pic.twitter.com/gjQcPwRcqD
— はぅ君 (@Hau_kun) September 21, 2022

float r,i,d;
size(720,720);strokeWeight(2);for(d=960;d>9;d-=80)for(r=0;r<TAU;r+=PI/d*5){resetMatrix();translate(cos(r)*d/2+360,sin(r)*d/2+360);rotate(r+PI/2);for(i=0;i<random(3);i++){line(0,0,(int(random(3))-1)*7,(int(random(3))-1)*14);line(-4,-20,4,-20);}}#つぶやきProcessing pic.twitter.com/KEvg4OwN7x
— はぅ君 (@Hau_kun) February 24, 2020

float x,d,i,a=0,b=0,r;
size(720,720);
for(d=360;d>0;d-=35)
for(r=0;r<TAU;r+=PI/2){
resetMatrix();
translate(360,360);
rotate(r);
for(x=d+15;x<=705-d;x+=12)
for(i=0;i<6;i++)
line(a=i%2==0?x+1-360:a,b=i%2==0?d+1-360:b,a+=int(random(2))*6,b+=int(random(2))*8);
}#つぶやきProcessing pic.twitter.com/CV4sPEZqbE
— はぅ君 (@Hau_kun) February 25, 2020

float r,R,y,i,j;
size(720,720);noFill();for(y=0;y<9;y++){for(i=0;i<8;i++)for(r=.2;r<PI;r+=.35){push();translate(cos(R=r+i%2*PI)*50+99*i,sin(R)*50+y*90);rotate(r+1.6);for(j=0;j<3;j++)bezier(random(19)-9,-9,random(9)-4,-19,random(9)-4,19,random(19)-9,9);pop();}}#つぶやきProcessing pic.twitter.com/ctGWjhvdzj
— はぅ君 (@Hau_kun) March 5, 2020

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.001
background(0)
noFill()
stroke(W)
F=(n)=>{return noise(n,t)>.5?15:-15}
for(j=289;j;j–)for(i=0;i<4;i+=PI)arc(X=j%17
*45,Y=int(j/17)*45,42,42,R=i-F(X+Y+t)/30*1.6,R+1.6)+line(X+F(X+i),Y+F(Y+i),X-F(X+9+i),Y-F(Y+9+i))}#つぶやきProcessing pic.twitter.com/Yx3Xo1Jzhm
— はぅ君 (@Hau_kun) May 12, 2021

コメントするコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

型くりこ「Bezier Glyph/ベジェグリフ」について

「Bezier Glyph/ベジェグリフ」について

使い方

追加説明

応用編

その他作品

関連

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル