型くりこ「Family Crest/家紋」について

2023年1月7日

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

「Family Crest/家紋」について

黒い円の中に白黒で模様を描くと家紋っぽくなるという技法です。

何かしらの対称的な模様やシンボルを描くだけでそれっぽくなるので、CreativeCodingやGenerativeArtと非常に相性が良いと考えています。

使い方

circle()で大きな黒い円を描き、その中に少し小さな白い円を描くことで輪を描きます。

あとはその中に白黒で模様を描くだけです。線を少し太くするとより良い効果が得られます。

void setup() {

size(720, 720, P2D);

background(255);

// 大きな黒い円を描き、その中に白い円を描くことで家紋の輪を作る

fill(0);

circle(width / 2, height / 2, width);

fill(255);

circle(width / 2, height / 2, width - 100);

fill(0);

stroke(255);

strokeWeight(3);

for (float r = 0; r < TAU; r+= PI / 2.5) {

push();

translate(width / 2, height / 2);

rotate(r - PI / 2);

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

ellipse(150 + i * 20, 0, 250 - i * 30, 120 - i * 25);

}

pop();

}

circle(width / 2, height / 2, 50);

}

function setup() {

createCanvas(720, 720);

background(255);

// 大きな黒い円を描き、その中に白い円を描くことで家紋の輪を作る

fill(0);

circle(width / 2, height / 2, width);

fill(255);

circle(width / 2, height / 2, width - 100);

fill(0);

stroke(255);

strokeWeight(3);

for (var r = 0; r < TAU; r+= PI / 2.5) {

push();

translate(width / 2, height / 2);

rotate(r - PI / 2);

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

ellipse(150 + i * 20, 0, 250 - i * 30, 120 - i * 25);

}

pop();

}

circle(width / 2, height / 2, 50);

}

楕円を中央から外側に向かって重ねただけだがそれっぽい家紋となった。シンプルな意匠の方がそれっぽく見えるようである。

例

型くりこ「Family Crest/家紋」を使って、オリジナルの家紋を作ってみた例。

blendMode(DIFFERENCE)を使うと、白黒反転ができるため、簡単に複雑な模様を描くことができる。

void setup() {

size(720, 720);

background(255);

fill(0);

circle(width / 2, height / 2, width);

fill(255);

circle(width / 2, height / 2, width - 100);

blendMode(DIFFERENCE);

fill(255);

noStroke();

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

beginShape();

for (float r = 0; r < TAU; r += PI / 16) {

float length = sin(r * 4) * 250 + 50 - i * 6;

vertex(cos(r - PI / 8) * length + width / 2, sin(r - PI / 8) * length + height / 2);

}

endShape();

}

blendMode(BLEND);

strokeWeight(5);

stroke(255);

for (float r = 0; r < TAU; r += PI / 8) {

line(width / 2, height / 2, cos(r) * 300 + width / 2, sin(r) * 300 + height / 2);

}

function setup() {

createCanvas(720, 720);

background(255);

fill(0);

circle(width / 2, height / 2, width);

fill(255);

circle(width / 2, height / 2, width - 100);

blendMode(DIFFERENCE);

fill(255);

noStroke();

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

beginShape();

for (var r = 0; r < TAU; r += PI / 16) {

var length = sin(r * 4) * 250 + 50 - i * 6;

vertex(cos(r - PI / 8) * length + width / 2, sin(r - PI / 8) * length + height / 2);

}

endShape();

}

blendMode(BLEND);

strokeWeight(5);

stroke(255);

for (var r = 0; r < TAU; r += PI / 8) {

line(width / 2, height / 2, cos(r) * 300 + width / 2, sin(r) * 300 + height / 2);

}

応用編

円状にクリッピングを行うことで、円の内側のみに図形を描くようにすることができます。

Java版の場合はマスク用のPGraphicsを用意して、mask()することでクリッピングを実現できます。p5.jsはcircle()で円を描いた後にdrawingContext.clip()で実現できます。

型くりこ「Family Crest/家紋」で、クリッピングを使って、画面外にはみ出ても問題ないようにしてみた例。

Java版とp5.jsで実装の方式は異なるが、それぞれ円の外にはみ出た部分は描画しないようにできる。

PGraphics ring;

void setup() {

size(720, 720);

rectMode(CENTER);

ring = createGraphics(width, height); // 輪を描く

ring.beginDraw();

ring.noStroke();

ring.background(255);

ring.fill(0);

ring.circle(width / 2, height / 2, width);

ring.endDraw();

PGraphics ringMask = createGraphics(width, height); // 輪の内側を黒で塗りつぶしてマスクしない領域にする

ringMask.beginDraw();

ringMask.noStroke();

ringMask.background(255);

ringMask.fill(0);

ringMask.circle(width / 2, height / 2, width - 100);

ringMask.endDraw();

ring.mask(ringMask); // マスクで輪の内側をクリッピング

}

void draw() {

background(255);

noStroke();

fill(0);

for (float r = 0; r < TAU; r+= PI / 4) {

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

push();

translate(width / 2, height / 2);

rotate(r + frameCount / 100f + i / 10f);

rect(150 + i * 10 + sin(r * 4 + frameCount / 10f) * 120, tan(r * 4 + frameCount / 50f) * 100, 200 - i * 20, 10);

pop();

}

circle(width / 2, height / 2, 50);

image(ring, 0, 0); // 輪を描く

}

function setup() {

createCanvas(720, 720);

rectMode(CENTER);

}

function draw() {

background(255);

fill(0);

circle(width / 2, height / 2, width);

fill(255);

push();

circle(width / 2, height / 2, width - 100);

drawingContext.clip(); // 円の領域でクリッピング

noStroke();

fill(0);

for (var r = 0; r < TAU; r+= PI / 4) {

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

push();

translate(width / 2, height / 2);

rotate(r + frameCount / 100 + i / 10);

rect(150 + i * 10 + sin(r * 4 + frameCount / 10) * 120, tan(r * 4 + frameCount / 50) * 100, 200 - i * 20, 10);

pop();

}

circle(width / 2, height / 2, 50);

pop(); // drawingContext.clip()を解除するためのpop()

}

その他作品

型くりこ「Family Crest/家紋」の考え方を使った作品をいくつか紹介いたします。

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

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
noStroke()
background(W)
F=fill
C=circle
F(S=1)
C(H=360,H,W)
F(W)
C(H,H,660)
drawingContext.clip()
for(i=240;i–;S=-S)resetMatrix()+translate(cos(R=i*PI/4)*H+H,sin(R)*H+H)+rotate(t*S)+F((i%16-7)*W)+rect(-i,-i,i*2)}#つぶやきProcessing pic.twitter.com/femY3wKfjI
— はぅ君 (@Hau_kun) January 29, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
background(W)
F=fill
F(0)
C=circle
C(H=360,H,W)
F(W)
C(H,H,660)
F(0)
for(i=0;i<3;i++)for(r=0;r<6;r+=PI/2){resetMatrix()+translate(H,H)+rotate(r+t)
for(j=-i;j<2+i;j++)rect(i*90*(1-sin(t+j*sin(t))**8),50-j*40,80,30)}}#つぶやきProcessing pic.twitter.com/8Jdh8QXxqi
— はぅ君 (@Hau_kun) January 3, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.05
background(W)
noStroke()
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
F(F=1)
for(r=0;r<12+!(X=Y=H)+!(F=-F);r+=PI/4)for(i=1;i++<99;)fill((J=0|r/6)*W)+C(X+=cos(R=r+i/59*F)*3,Y+=sin(R)*3,sin(i/46-J+tan(t)/39)*99)}#つぶやきProcessing pic.twitter.com/mZqkRnmoC8
— はぅ君 (@Hau_kun) January 8, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.02
noStroke()
background(W)
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
drawingContext.clip()
for(i=1;i<15;i++)for(r=0;r<TAU;r+=TAU/i/3)F(i%2*W)+C(cos(R=r+i)*(D=i*22)+H,sin(R)*D+H,150*sin(i+r*3+t))}#つぶやきProcessing pic.twitter.com/iQn0EkhUWW
— はぅ君 (@Hau_kun) January 20, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
background(W)
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
F(0)
for(i=0;i++<12;)for(r=i;r<6+i;r+=PI/4)resetMatrix()+translate(cos(R=r+t)*(D=i*24*sin(t))+H,sin(R)*D+H)+rotate(R)+ellipse(0,0,S=i*3,S*7*sin(t)**2)}#つぶやきProcessing pic.twitter.com/VGQ7VNFpw1
— はぅ君 (@Hau_kun) January 17, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
noStroke()
background(W)
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
drawingContext.clip()
F(A=1)
for(i=1;i<12;i++)for(r=0;r<TAU;r+=PI/8)F(i%2*W)+circle(cos(R=r+i*(A=-A))*(D=i*32)+H,sin(R)*D+H,i*cos(t)*12)}#つぶやきProcessing pic.twitter.com/qHsrQUyg3H
— はぅ君 (@Hau_kun) January 18, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
F=fill
C=circle
background(W)
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
F(0)
stroke(W)
for(j=4;j<16;j+=2)for(r=A=0;r<j*2;A+=r++%2?-j+1:j)for(i=0;i<2;)fill(i*W)+C(cos(R=A*PI/j)*(D=j*15*cos(t)**2+50+i++*20)+H,sin(R)*D+H,90)}#つぶやきProcessing pic.twitter.com/8xVSNKVlMw
— はぅ君 (@Hau_kun) January 5, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.03
noStroke()
background(W)
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
for(y=70;y<640;y+=60)F(0)+rect(X=150+(L=cos(y/110)*85),y,A=420-L*2,40,20)+F(W)+C(X,y+20,S=35*(1-sin(t)**8))+C(X+A,y+20,S)+rect(X,y+18,A,4)}#つぶやきProcessing pic.twitter.com/ESYzufe8Ix
— はぅ君 (@Hau_kun) January 9, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.02
noStroke()
background(W)
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
for(i=15;i–;)for(r=0;r<TAU;r+=PI/(3+i*3))fill(i%2*W)+resetMatrix()+translate(H,H)+rotate(r)+C(i*20,0,99*sin(i/8+t+sin(i/4+r*3+t)))}#つぶやきProcessing pic.twitter.com/qAaABavjgK
— はぅ君 (@Hau_kun) January 24, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
noStroke()
background(W)
F=fill
C=circle
F(I=0)
C(H=360,H,W)
F(W)
C(H,H,660)
drawingContext.clip()
for(i=30;i–;)for(r=0;r<TAU;r+=PI/16)F(I++%2*W)+arc(H,H,i*25*sin(R=i+r+t),i*25*sin(R),r+sin(R*4)*PI/32,r+PI/16)}#つぶやきProcessing pic.twitter.com/uRrs7uudOC
— はぅ君 (@Hau_kun) January 26, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
noStroke()
background(W)
translate(H=360,H)
F=fill
C=circle
F(0)
C(0,0,W)
F(W)
C(0,0,660)
drawingContext.clip()
for(i=18;i–;)F(i%2*W)+rotate(PI/2)+ellipse(cos(R=t*i)*9,sin(R+t)*9,i*40,i*30);C(0,0,15)}#つぶやきProcessing pic.twitter.com/iCWLikVE57
— はぅ君 (@Hau_kun) January 23, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
background(W)
fill(0)
circle(H=360,H,W)
fill(W)
circle(H,H,660)
fill(0)
for(j=1;j<4;j++)for(r=0;r<TAU;r+=TAU/3)for(i=0;i<1.5;i+=.02)circle(cos(R=r+(i+t)*(j%2?1:-1))*(D=90*j)+H,sin(R)*D+H,i*65)
circle(H,H,60)}#つぶやきProcessing pic.twitter.com/LA8tZys1wI
— はぅ君 (@Hau_kun) January 2, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
B=blendMode
F=fill
B(BLEND)
background(W)
F(0)
circle(H=360,H,W)
F(W)
circle(H,H,660)
B(DIFFERENCE)
for(r=0;r<54;r++)circle((F=r%9)?cos(A=R+r%9/4-1.1)*99+X:X=cos(R=r/8.6+t)*99+H,F?sin(A)*99+Y:Y=sin(R)*99+H,F?9:185)}#つぶやきProcessing pic.twitter.com/wu9WbEDaJs
— はぅ君 (@Hau_kun) January 4, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
B=blendMode
B(BLEND)
background(W)
B(DIFFERENCE)
for(i=0;i<3;i++)circle(H=360,H,W-i*60)
for(r=0;r<24;r+=TAU/4)bezier(H,H,H,H,cos(R=r%12>6?r+1+t:r-1-t)*(D=r>12?250:200)+H,sin(R)*D+H,cos(r)*(D+=50)+H,sin(r)*D+H)}#つぶやきProcessing pic.twitter.com/5rdHa0jtAb
— はぅ君 (@Hau_kun) January 6, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.02
background(W)
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
F(0)
for(i=4;–i;)for(r=0;r<6;r+=PI/4)resetMatrix()+translate(cos(r)*(D=i*75)+H,sin(r)*D+H)+rotate(r)+rect(A=-i*9,B=-i*40*(1-sin(t)**8),A*-2,B*-2,i*9)}#つぶやきProcessing pic.twitter.com/h5RDEjiGrW
— はぅ君 (@Hau_kun) January 13, 2022

t=a=0
draw=_=>{t||createCanvas(W=720,W)
t+=sin(a+=.03)**4*.08
background(W)
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
F(0)
for(p=0;p<6;p+=PI/2)for(r=0;r<2.75;r+=.01)C(cos(R=r+p-t)*(L=50*(r*1.3+2+cos(t)**2))+H,sin(R)*L+H,tan(.95-r/3)*90*cos(t))}#つぶやきProcessing pic.twitter.com/XDwjGfjpxW
— はぅ君 (@Hau_kun) January 12, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
noStroke()
background(W)
F=fill
C=circle
translate(H=360,H)
F(0)
C(0,0,W)
F(W)
C(0,0,660)
drawingContext.clip()
for(i=90;i–;)rotate(t/9)+F(i%2*W)+rect(X=-i*4*cos(t+i/45),Y=-i*4*sin(t*2+i/45),-X*2,-Y*2,i)}#つぶやきProcessing pic.twitter.com/OulK8LSxnk
— はぅ君 (@Hau_kun) January 22, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.05
background(W)
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
F(0)
for(x=-315;x<316;x+=30)quad(X=abs(x)+99,H=255+(Y=x>0?0:210)+(A=sin(x>0?t+x/99:t-x/99+PI)*20),X+21,H,X+71,H=355+Y/21,X+51,H)
rect(90,358,550,4)}#つぶやきProcessing pic.twitter.com/NQsWfzZxta
— はぅ君 (@Hau_kun) January 10, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
noStroke()
background(W)
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
rectMode(CENTER)
for(r=0;r<16;r+=(r>7?2:1))F(r>7?W:0)+square(cos(R=r*PI/4)*150+H,sin(R)*150+H,min(tan(t)**2,1)*(r>7?150:190))}#つぶやきProcessing pic.twitter.com/J0Mz2VjSn4
— はぅ君 (@Hau_kun) January 11, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
noStroke()
background(W)
F=fill
C=circle
F(0)
C(H=360,H,W)
F(W)
C(H,H,660)
drawingContext.clip()
F(0)
for(i=40;i–;)for(r=0;r<TAU;r+=PI/3)F(i%2*W)+arc(cos(r)*H+H,sin(r)*H+H,i*15,i*15,R=r+t+i,R+PI)}#つぶやきProcessing pic.twitter.com/YNofyYe8C3
— はぅ君 (@Hau_kun) January 27, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
noStroke()
background(W)
F=fill
C=circle
F(S=1)
C(H=360,H,W)
F(W)
C(H,H,660)
drawingContext.clip()
for(i=240;i–;S=-S)resetMatrix()+translate(cos(R=i*PI/4)*H+H,sin(R)*H+H)+rotate(t*S)+F((i%16-7)*W)+rect(-i,-i,i*2)}#つぶやきProcessing pic.twitter.com/femY3wKfjI
— はぅ君 (@Hau_kun) January 29, 2022

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

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

型くりこ「Family Crest/家紋」について

「Family Crest/家紋」について

使い方

例

応用編

その他作品

関連

コメント

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

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