![見出し画像](https://assets.st-note.com/production/uploads/images/10506529/rectangle_large_type_2_a72e6342f77fb554ee9fafb6b28d69be.png?width=1200)
シンプルな図形から幾何学的な模様を作る by Processing
今回はProcessingで作品を作る時に僕がよく使っているパターンというかテクニックというかそんなものを解説します。
今回作るのはこういうの。
早速作っていきましょう!
まずはグリッドから作ります
void setup() {
size(700, 700);
pixelDensity(2);
noLoop();
}
void draw() {
background(255);
tile();
}
void tile() {
int count = 20; //1列にいくつの四角形を表示するか
float w = width/count;
for (int j = 0; j < count; j++) {
for (int i = 0; i < count; i++) {
//3.5で追加されたrectの正方形バージョン
square(i*w, j*w, w);
}
}
}
グリッドを作る方法は色々ありますが、今回はこの四角形を並べる方法が使いやすいと思います。
僕はよく使う形なのでテンプレートとして保存してあります。
次にひとつひとつの四角形にランダムな図形を配置したいのでこんな関数を作ります。
void randomShape(float x, float y, float s) {
float hs = s/2; //一辺の半分
pushMatrix();
//座標軸を四角形の中心に移動
translate(x + hs, y + hs);
popMatrix();
}
これにシンプルな図形をはめ込みングします。
今回使うのはこの4つの図形
ひとつひとつの座標はこうなっているので
これを目安にカタカタと打ち込んでいきます。
void randomShape(float x, float y, float s) {
float hs = s/2; //一辺の半分
pushMatrix();
//座標軸を四角形の中心に移動
translate(x + hs, y + hs);
fill(0);
noStroke();
//4パターンの中からランダムに図形を選択
if (random(1) > 3.0/4.0) {
//四角形
square(-hs, -hs, s);
} else if (random(1) > 2.0/4.0) {
//三角形
//0度、90度、180度、270度のどれかに回転をさせる
rotate(HALF_PI * int(random(4)));
triangle(-hs, -hs, hs, hs, -hs, hs);
} else if (random(1) > 1.0/4.0) {
//半円
rotate(HALF_PI * int(random(4)));
arc(0, -hs, s, s, 0, PI);
} else {
//1/4円
rotate(HALF_PI * int(random(4)));
arc(-hs, -hs, s*2, s*2, 0, HALF_PI);
}
popMatrix();
}
random()を使って分岐させます。少数で表してもいいのですが同じ確率で分岐させる場合はわかりやすいので分数を使っています。
.0をつけないと小数点以下が切り捨てられるので注意しましょう。
四角形以外は回転したパターンも使います。このために軸を中心に移動させました。
これで完成!
完成形のコードはこうなります。
void setup() {
size(700, 700);
pixelDensity(2);
noLoop();
}
void draw() {
background(255);
tile();
}
void tile() {
int count = 20; //1列にいくつの四角形を表示するか
float w = width/count;
for (int j = 0; j < count; j++) {
for (int i = 0; i < count; i++) {
//3.5で追加されたrectの正方形バージョン
//square(i*w, j*w, w);
randomShape(i*w, j*w, w);
}
}
}
void randomShape(float x, float y, float s) {
float hs = s/2; //一辺の半分
pushMatrix();
//座標軸を四角形の中心に移動
translate(x + hs, y + hs);
fill(0);
noStroke();
//4パターンの中からランダムに図形を選択
if (random(1) > 3.0/4.0) {
//四角形
square(-hs, -hs, s);
} else if (random(1) > 2.0/4.0) {
//三角形
//0度、90度、180度、270度のどれかに回転をさせる
rotate(HALF_PI * int(random(4)));
triangle(-hs, -hs, hs, hs, -hs, hs);
} else if (random(1) > 1.0/4.0) {
//半円
rotate(HALF_PI * int(random(4)));
arc(0, -hs, s, s, 0, PI);
} else {
//1/4円
rotate(HALF_PI * int(random(4)));
arc(-hs, -hs, s*2, s*2, 0, HALF_PI);
}
popMatrix();
}
//クリックで再描画
void mousePressed() {
redraw();
}
//sキーで画像保存
void keyPressed(){
if(key == 's')saveFrame("####.png");
}
tile()の中のsquare()はもう用済みなので彼にはこの世界からコメントアウトしてもらいました。
クリックすると再描画、sキーで画像保存します。
あとは実行して図形たちが踊る様をご覧あれ!
幾何学的な模様ですね。秩序からのカオス。
新たな形、思いもよらなかった隙間が生まれましたね。
…あなたそんな顔もできるのね。
まとめ
今回紹介したこのテクニックを派生させるとしたら、
シンプルに図形、色などを変えてみる。
図形をアニメーションさせる。
任意の図形の描画される確率を変えてみる。
無限に応用ができますね。
何か素敵なモノができたらぜひシェアしてください!
Happy coding!
------------------------(2019/03/19 追記)-------------------------
この記事を見てなにか作っていただいた方々を紹介します!
本当にありがとうございます!
@okazz_ おかずさんのコードを元に一個作品できました〜。😊
— deconbatch (@deconbatch) March 17, 2019
Down on the Corner.
dotc-190317192901https://t.co/4cT9xYwuFe#processing #generative #creativecoding pic.twitter.com/8ta1fqhAod
おかずさんの記事をもとにp5.jsで試してみた.個別に色変えると独立したシェイプに見えてしまうぶん,魅力が減ったように感じたけどnoiseで連続性持たせればいいのかも.また今度試してみよう😃 #p5js #dailycoding https://t.co/WHHthC9w63 pic.twitter.com/SMqDZRVkas
— ǝʞnsunɥs oʍɐʞɐʇ (@takawo) March 16, 2019
おかずさんの記事(https://t.co/vTpB467una)見て作ってみた!タイルを並べるときに、隣のタイルと同じ色の辺を揃えて並べるようにしてみた。丸が完成する率が上がって雰囲気が変わった感じ #Processing pic.twitter.com/CmIJygLcxO
— ryotako (@ryotakob) March 17, 2019
いつも参考にさせていただいているおかずさん@okazz_のコードを基に、モノクロな何かを作ってみました。
— KubLab (@kub_lab) March 19, 2019
勉強するのがすごい楽しいです! pic.twitter.com/PC6BL5HnJE
ここから先は
¥ 100
応援してくださる方!いつでもサポート受け付けてます!