型くりこ「Layer Circles/重ね円」

2023年1月2日

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

「Layer Circles/重ね円」について

大きいサイズから小さいサイズの図形をたくさん重ねて描き、それらの図形同士を重ねることで、互いの図形が反発しあってひしめいているかのような質感を出すものです。

ゼリーや細胞が集まっているかのような見た目になります。特に物理法則の計算しませんが、図形を動かすとあたかもぷにぷにした質感の物体同士が相互に作用しているかのように見えて面白い効果を発揮します。

以前は「Cell Circle」と呼んでいましたが、より分かりやすい名称にしました。

使い方

大きい図形から小さい図形を順番に描いていきます。各図形の色は少しずつ明るくするなどして変えておくことで立体感も出すことができます。

void setup() {

size(720, 720, P2D);

background(0);

noStroke();

for (int d = 90; d > 0; d -= 5) { // 大きい円から小さい円までを順番に描く

for (int y = 0; y <= height; y += 60) {

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

fill(255 - d * 2);

circle(x, y, d);

}

function setup() {

createCanvas(720, 720);

background(0);

noStroke();

for (var d = 90; d > 0; d -= 5) { // 大きい円から小さい円までを順番に描く

for (var y = 0; y <= height; y += 60) {

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

fill(255 - d * 2);

circle(x, y, d);

}

追加説明

この型くりこは図形を動かすことで真価を発揮します。

void setup() {

size(720, 720, P2D);

noStroke();

}

void draw() {

background(0);

for (int d = 90; d > 0; d -= 5) {

for (int y = 0; y <= height; y += 60) {

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

fill(255 - d * 2);

float tx = x + sin(x + y + frameCount / 50f) * 20;

float ty = y + sin(x + y / 2 + frameCount / 50f) * 30;

circle(tx, ty, d);

}

function setup() {

createCanvas(720, 720);

noStroke();

}

function draw() {

background(0);

for (var d = 90; d > 0; d -= 5) {

for (var y = 0; y <= height; y += 60) {

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

fill(255 - d * 2);

var tx = x + sin(x + y + frameCount / 50) * 20;

var ty = y + sin(x + y / 2 + frameCount / 50) * 30;

circle(tx, ty, d);

}

特に物理法則の計算を入れたわけではないが、球体（のように見える円）がほかの球体を押しのけているような絵となる

例

型くりこ「Layer Circles/重ね円」を使って、中心に円が集まるようにしてみた例。

各図形がひしめき合いながら、真ん中を目指しそして脱出していく様子が見える。

void setup() {

size(720, 720, P2D);

colorMode(HSB, 360, 100, 100);

noStroke();

}

void draw() {

background(0);

for (int d = 90; d > 0; d -= 5) {

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

fill(r * 57, 60, 100 - d); // TAU * 57がだいたい360になる

float length = tan(r * 4 + frameCount / 200f) * 100;

float tx = cos(r) * length + width / 2;

float ty = sin(r) * length + height / 2;

circle(tx, ty, d);

}

function setup() {

createCanvas(720, 720);

colorMode(HSB);

noStroke();

}

function draw() {

background(0);

for (var d = 90; d > 0; d -= 5) {

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

fill(r * 57, 60, 100 - d); // TAU * 57がだいたい360になる

var length = tan(r * 4 + frameCount / 200) * 100;

var tx = cos(r) * length + width / 2;

var ty = sin(r) * length + height / 2;

circle(tx, ty, d);

}

応用編

図形を重ねるような動きと非常に相性が良いです。

タンジェントを利用して、下方向に向かって円を動かしてみた例。

はちみつのようなドロッとした物体が中央の柱にまとわりついて、そして落下していくような効果になる。

void setup() {

size(720, 720, P2D);

colorMode(HSB, 360, 100, 100);

noStroke();

}

void draw() {

background(0);

for (int d = 90; d > 0; d -= 5) {

for (float x = 0; x < width; x += 6) {

fill(x * 9 % 360, 60, 100 - d);

float ty =tan(x * 3 + frameCount / 300f) * 2 + height / 2;

ellipse(x, ty, d / 2, d);

}

function setup() {

createCanvas(720, 720);

colorMode(HSB);

noStroke();

}

function draw() {

background(0);

for (var d = 90; d > 0; d -= 5) {

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

fill(x * 9 % 360, 60, 100 - d);

var ty =tan(x * 3 + frameCount / 300) * 2 + height / 2;

ellipse(x, ty, d / 2, d);

}

その他作品

型くりこ「Layer Circles/重ね円」の考え方を使った作品をいくつか紹介いたします。

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

float x,y,d,t;
void setup(){size(720,720);colorMode(HSB);}
void draw(){
clear();
t+=.01;
noStroke();
for(d=90;d>0;d-=3)
for(y=0;y<800;y+=80)
for(x=0;x<800;x+=80){
fill((2*x+3*y)%255,255,d*3);
circle(x+cos(x+y+t)*d/3,y+sin(x+y-t)*d/3,d);
}
}#つぶやきProcessing pic.twitter.com/GINgP77hb1
— はぅ君 (@Hau_kun) July 21, 2020

float t,d,l,x;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.001;
for(d=90;d>0;d-=3){
for(l=30;l<230;l+=99){
for(x=0;x<760;x+=15){
fill((x+l)%255,255-d*2,d*3);
circle(x,1/sin(x+t+l)*l+360,d);
}
}
}
}#つぶやきProcessing pic.twitter.com/EycyHOh5sS
— はぅ君 (@Hau_kun) July 23, 2020

float t,d,x,y,S;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.002;
for(d=90;d>0;d-=3)
for(y=0;y<780;y+=60)
for(x=y/60%2*30;x<780;x+=60){
fill((x+y)%255,255-d*2,255,S=d*3*sin((.1*sin(x+y+t*2)*x+y)*.1+t));
circle(x,y,d);
}
}#つぶやきProcessing pic.twitter.com/4RkEXfLeAR
— はぅ君 (@Hau_kun) August 10, 2020

float t,x,y,d;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.01;
for(d=90;d>0;d-=3)
for(y=0;y<780;y+=60)
for(x=y/60%2*30;x<780;x+=60){
fill(((x+y)*.1+t)%255,255-d*2,d*4*sq(sin(x*4+y*4+t)));
circle(x,y,1.5*d*sin(x*2+y*2+t));}}#つぶやきProcessing pic.twitter.com/lpjs1qroVz
— はぅ君 (@Hau_kun) August 1, 2020

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.01
background(0)
noStroke()
for(d=200;d>0;d-=9)for(y=0;y<=W;y+=60)for(x=0;x<=W;x+=60)fill(d/2,d+50,d,A=sin(dist(x,y,360,360)/99-t)**8*255)+circle(x+noise(x/99,y/99,t)*198-99,y+noise(x/99,y/99,t+9)*198-99,d*A/255)}#つぶやきProcessing pic.twitter.com/TU0XlbZx2A
— はぅ君 (@Hau_kun) July 31, 2022

t=0
draw=_=>{t||createCanvas(W=720,W)
t+=.005
colorMode(HSB)
background(0,.1)
noStroke()
for(d=200;d>0;d-=9)for(x=0;x<W;x+=5)fill(noise(x)*W%360,d/2,99-d/2,1-d/200)+ellipse(x,tan(R=noise(x)*99+t)**9*3+noise(x/99,int((R-PI/2)/PI)/9)*W,d/3,d*(sin(R)**2/2+.5))}#つぶやきProcessing pic.twitter.com/TpCpFWEdVp
— はぅ君 (@Hau_kun) August 1, 2022

float t,d,x,y,E=360;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.01;
for(d=90;d>0;d-=3)
for(y=-E;y<=E;y+=60)
for(x=-E;x<=E;x+=60){
fill((x*x+y*y)%255,192,255-d*3);
circle(x+cos(x*y*4+t)*d/3+E,y+sin(x*y*4+t)*d/3+E,d);
}
}#つぶやきProcessing pic.twitter.com/hTUNvgiKRD
— はぅ君 (@Hau_kun) July 22, 2020

float t,d,x,T;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.003;
for(d=90;d>0;d-=3){
for(x=0;x<730;x+=9){
fill((x*x)%255,255-d*2,d*3);
ellipse(x,.5*tan(T=2*x+t)*9+150,d*(abs(cos(T))*.8+.2),d*(sq(sin(T))*.2+.8));
}
}
}#つぶやきProcessing pic.twitter.com/J5OjtleH6I
— はぅ君 (@Hau_kun) July 25, 2020

float d,r,t,R,L;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.01;
for(d=90;d>0;d-=3)
for(r=0;r<TAU;r+=PI/16){
fill(r*40,255-d*2,d*3);
circle(cos(R=r-d*(sin(3*r+5*t)*.005))*(L=250+sin(5*r+3*t)*50)+360,sin(R)*L+360,d);
}
}#つぶやきProcessing pic.twitter.com/I5t0r0YQo8
— はぅ君 (@Hau_kun) July 28, 2020

float t,x,y,d;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
t+=.003;
for(d=90;d>0;d-=3)
for(y=0;y<780;y+=60)
for(x=y/60%3*20;x<780;x+=60){
fill((x+y)%255,255-d*2,d*3);
circle(x+tan(y+t)*99,y+tan((x+y)*.01+t)*90,d);
}
}#つぶやきProcessing pic.twitter.com/3yAqiKT461
— はぅ君 (@Hau_kun) August 2, 2020

float t,x,y,d;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
t+=.004;
for(d=90;d>0;d-=3)
for(y=0;y<760;y+=40)
for(x=y/40%2*20;x<760;x+=40){
fill((x+y)%255,d*3,255-d*3);
circle(x+noise(x+y,d*.01,t)*99-50,y+noise(d*.01,x*y,t)*99-50,d);
}
}#つぶやきProcessing pic.twitter.com/iGBcqEJW28
— はぅ君 (@Hau_kun) July 29, 2020

float t,r,d,S;
void setup(){size(720,720);noStroke();colorMode(HSB);}
void draw(){
clear();
blendMode(ADD);
t+=.01;
for(d=120;d>0;d-=3)
for(r=0;r<TAU*9;r+=.5){
fill((r*r)%255,d*2,255-d*2,16);
circle(cos(r)*r*9*(S=sin(r*r+t))+360,sin(r)*r*9*S+360,d);
}
}#つぶやきProcessing pic.twitter.com/nW0Y52stUQ
— はぅ君 (@Hau_kun) July 24, 2020

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

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

型くりこ「Layer Circles/重ね円」

「Layer Circles/重ね円」について

使い方

追加説明

例

応用編

その他作品

関連

コメント

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

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