型くりこについてはこちらをご覧ください。
目次
「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 になってしまっているので、コードは圧縮されている箇所が多いですが、基本的な考え方は本記事に記載した内容と同等です。
コメント