パターンの再構成
先の例ではコンポジションを生成することを行いました。絵を描くことには様々な手法があるだけでなく、写真技術、産業技術、デジタル技術の台頭により「パターン」が表現として使われることが増えてきました。近代に限らず、織物では絨毯やキルトなどの製作工程において、このようなパターンはよく使われています。
- ある決められたプロセスを何度も繰り返すことで一つの模様が完成する
- これを何度も繰り返す
この手順でパターンを生成し、私達の服やパッケージ、ポスターなど様々なファッション、グラフィック分野で活用されているのをよく目にするかと思います。
最初に以下の記事を読んでみてください。
このように簡単なプログラムでパターン（模様を生成することができます）。このようなパターンをプログラムで書くことも観察と実装（デッサンとスケッチ）を実現する上でよい訓練になります。このページではみなさんがよく見るパターンをよく観察することで、実際にパターンを生成するだけでなく、ベースとなるプログラムからパラメータを調整することで、そのパターンにバリエーションをもたせるところまでをやってみます。
参考
minä perhonen
日本人デザイナーである皆川明（みながわ・あきら）さんが設立したファッションブランド。工業的な均一のパターンというよりも、歪みやブレ、素朴な模様が特徴的です。今回はウェブサイトから「Sunny candy」というテキスタイルをピックアップし、これをプログラムで生成することを目指します。その視覚的な構成要素を自分なりに解釈し、再構成することが目的です。
- minä perhonenウェブサイト: https://www.mina-perhonen.jp/
- 現在展覧会やってます：https://mina-tsuzuku.jp/
観察とスケッチ
https://www.mina-perhonen.jp/textile/0512より掲載
まずは上図をよく観察してください。水玉模様ではありますが、一つひとつのまるが微妙に異なっている点、配色が決まっている点、点の大きさに関してもある程度の幅が決められているように見えます。そこでまずは、
- 指定された矩形領域(_x,_y,_w,_h)に対して指定された個数(_n)で指定された範囲の大きさ(_r_min, _r_maxの円を描く
ことから記述してみます。キーボードのスペースを押すと再描画、's'を押すとoutput.pngというファイルで画像を保存する機能をつけています。 それ以外は特に説明は不要かと思います。まずはシンプルなコードです。これで下記画像のように白い円が描かれます。
void drawPattern(float _x, float _y, float _w, float _h, float _r_min, float _r_max, int _n)
{
noStroke();
fill(255);
for ( int i = 0; i < _n; i++ ) {
float r = random(_r_min, _r_max);
float x = random(_x, _w);
float y = random(_y, _h);
ellipse(x, y, r, r);
}
}
void setup()
{
noLoop();
size(800, 400);
}
void draw()
{
background(200);
drawPattern(0, 0, width, height, 10.0, 100.0, 20);
noLoop();
}
void keyPressed()
{
if ( key == ' ' ) {
loop();
} else if ( key == 's' ) {
save("output.png");
}
}
色味
青、薄青、オレンジ、黄色、グレー、ピンクがおもに利用されています。どれも比較的彩度をちょっと低くした配色になっています。配色のことを英語でカラースキームと読んでいますが、このような場合は Adobe社が提供する、Adobe Colorを利用すると非常に便利です。画像をドラッグアンドドロップすることで、その画像のカラースキームを簡単に抽出できます。
今回はそれぞれの色の数値を以下のようにします。また、描く円に少しだけ透明度を加えました。
- 青：#3C88A6
- 薄青：#C6D4C8
- 黄色：#F2DC9B
- オレンジ：#CB862C
- ピンク：#D99C9C
- 背景色：#F2E4DC
void drawPattern(float _x, float _y, float _w, float _h, float _r_min, float _r_max, int _n)
{
int[] c = new int[]{#3C88A6, #C6D4C8, #F2DC9B, #CB862C, #D99C9C};
noStroke();
for ( int i = 0; i < _n; i++ ) {
float r = random(_r_min, _r_max);
float x = random(_x, _w);
float y = random(_y, _h);
fill(c[int(random(c.length))], 200);
ellipse(x, y, r, r);
}
}
void setup()
{
noLoop();
size(800, 400);
}
void draw()
{
background(#F2E4DC);
drawPattern(0, 0, width, height, 10.0, 100.0, 40);
noLoop();
}
void keyPressed()
{
if ( key == ' ' ) {
loop();
} else if ( key == 's' ) {
save("output.png");
}
}
形
では次は形です。現時点では単純な円で表現していますが、sunny candyの円は筆やインクを落としたような歪んだ円になっています。そこで、ellipseで描画していた部分をオリジナルの描画コードにすることにします。関数名をsunnyCandyCircleとして関数化します。ただその前にこのような形の歪んだ円を確認はどうすればよいでしょうか？ いろいろやり方はありますが、一般的によく使われるのは noise関数を利用したものです。すでにそれに関する記事も見つけたのでそちらを参照することで、sunnyCandyCircle()を実装したいと思います。このページではすぐに解答となりますが、ぜひ自分でノイズパラメータを理解して、動かしてみてください。
void sunnyCandyCircle(float _x, float _y, float _r)
{
_r = _r/2;
float param_noise = random(1000);
beginShape();
for ( float angle = 0.0; angle < 360.0; angle = angle + 1.0 ) {
float circle_noise = 10*noise(
param_noise+cos(radians(angle)),
param_noise+sin(radians(angle))
);
vertex(
_x + (_r+circle_noise)*cos(radians(angle)),
_y + (_r+circle_noise)*sin(radians(angle)));
}
endShape();
}
void drawPattern(float _x, float _y, float _w, float _h, float _r_min, float _r_max, int _n)
{
int[] c = new int[]{#3C88A6, #C6D4C8, #F2DC9B, #CB862C, #D99C9C};
noStroke();
for ( int i = 0; i < _n; i++ ) {
float r = random(_r_min, _r_max);
float x = random(_x, _w);
float y = random(_y, _h);
fill(c[int(random(c.length))], 200);
sunnyCandyCircle(x, y, r);
}
}
void setup()
{
noLoop();
size(800, 400);
}
void draw()
{
background(#F2E4DC);
drawPattern(0, 0, width, height, 10.0, 100.0, 40);
noLoop();
}
void keyPressed()
{
if ( key == ' ' ) {
loop();
} else if ( key == 's' ) {
save("output.png");
}
}
微妙な歪みが表現できているのがわかるかと思います。
モジュール化
ここまで来たところで，いろいろアレンジしたくなってきました．具体的には歪んだ円をリアルタイムにゆらゆら動かしたいなと思ったわけです．そこで初めてアニメーションやインタラクティブなコンテンツを実装することができるようになります．
というわけで，これまでのスケッチをベースにして、次は「デジタルだからできる表現」にチャレンジしてみます。パラメータ化する、対話的にする等ありますが、ここでは「アニメーションにする」をチャレンジします。とはいってもすでに静止画は生成できるようになっているので、そのSunny Candyのパターンがゆらぎながら動くようなアニメーションにしてみます。例えばあなたが空間デザイナーになって、ファッションデザイナーからインスタレーション用途の映像作成をお願いされたとします。このような場合は今回やったことを思い出してみましょう。もちろん友人のグラフィックデザイナーとのコラボレーション等でも活用できるのではないでしょうか。
最初に先程のノイズを利用してまずは円がゆらゆらと揺れるアニメーションを描いてみたいと思います．これまで同様に関数を利用して書いても良いですが，プログラムが煩雑になるほか，それら円をたくさん作ることを考えてモジュール化することにします．より具体的にはclass機能を使うことでモジュール化を実現します．
モジュール化を行う上で重要なポイントとして，最小構成がなにかをよく把握することです．例えば静止画であればピクセルというようにその素材そのものになるべく立ち返り，最小単位からクラスに記述し直していきます．今回モジュール化するのは
- ゆらゆらと揺れる円
のみとし，これをSpotクラスとします．また単純にゆらゆらすることに加えて，位置も微妙にゆらゆら動くようにしてみたいと思います．というわけで下記のようなプログラムを記述してみました．
- Spot.pde
class Spot { Spot(float _x, float _y, int _c, float _r) { x = x_init = _x; y = y_init = _y; c = _c; r = _r; param_noise = random(10000.0); position_noise_x = random(10000.0); position_noise_y = random(10000.0); increment_noise = 0.01; increment_noise_position = 0.001; } void draw() { param_noise = param_noise+increment_noise; position_noise_x += increment_noise_position; position_noise_y += increment_noise_position; x = x_init + 100*noise(position_noise_x); y = y_init + 100*noise(position_noise_y); noStroke(); beginShape(); for ( float angle = 0.0; angle < 360.0; angle = angle + 1.0 ) { float circle_noise = 20*noise( param_noise+cos(radians(angle)), param_noise+sin(radians(angle)) ); vertex( x + (r+circle_noise)*cos(radians(angle)), y + (r+circle_noise)*sin(radians(angle))); } endShape(); } float x; float y; float x_init; float y_init; int c; float r; float param_noise; float position_noise_x; float position_noise_y; float increment_noise; float increment_noise_position; }; Spot spot; void setup() { frameRate(60); spot = new Spot(width/2, height/2, 255, 20); size(800, 400); } void draw() { background(0); spot.draw(); }
最後はこれをSunnyCandyというクラスで，Spotを包括する形でまとめます．特に注意することはないですが，下記のコードを参照してください．
- SunnyCandy.pde
class Spot { Spot(float _x, float _y, int _c, float _r) { x = x_init = _x; y = y_init = _y; c = _c; r = _r; param_noise = random(10000.0); position_noise_x = random(10000.0); position_noise_y = random(10000.0); increment_noise = 0.01; increment_noise_position = 0.001; } void draw() { param_noise = param_noise+increment_noise; position_noise_x += increment_noise_position; position_noise_y += increment_noise_position; x = x_init + 100*noise(position_noise_x); y = y_init + 100*noise(position_noise_y); noStroke(); fill(c, 200); beginShape(); for ( float angle = 0.0; angle < 360.0; angle = angle + 1.0 ) { float circle_noise = 20*noise( param_noise+cos(radians(angle)), param_noise+sin(radians(angle)) ); vertex( x + (r+circle_noise)*cos(radians(angle)), y + (r+circle_noise)*sin(radians(angle))); } endShape(); } float x; float y; float x_init; float y_init; int c; float r; float param_noise; float position_noise_x; float position_noise_y; float increment_noise; float increment_noise_position; }; class SunnyCandy { SunnyCandy(int _n, float _r_min, float _r_max) { int[] c = new int[]{#3C88A6, #C6D4C8, #F2DC9B, #CB862C, #D99C9C}; spot = new Spot[_n]; for ( int i = 0; i < spot.length; i++ ) { spot[i] = new Spot(random(width), random(height), c[int(random(c.length))], random(_r_min, _r_max)); } } void draw() { background(#F2E4DC); for ( int i = 0; i < spot.length; i++ ) { spot[i].draw(); } } Spot spot[]; }; SunnyCandy sunny_candy; ; void setup() { frameRate(60); sunny_candy = new SunnyCandy(40, 5, 40); size(800, 400); } void draw() { sunny_candy.draw(); }
簡単なことと難しいこと
さて、ここまでスケッチをすすめて、ある程度Sunny Candyのパターンに近いものを自動生成し，かつアニメーションを生成することができるようになりました。ただし下記のことに関してはまだ実装できていません。
- 色同士の混ざり合い（布上なので、色が混ざるわけではなく、それぞれの色が細かくまだら状になる）
- フィジカルな入力に対する偶発性
- インクを落とした角度や量による広がり方や、その他環境に関わる要因は多種多様なため、これらすべてを網羅するのは困難。
これを実現するには、そもそも染色シミュレーションをする必要があるので、そんな簡単にはできません。参考までに染色のシミュレーションをやってる森本研究室のリンク張っておきます。興味ある人はどうぞ。
練習
この他 https://www.mina-perhonen.jp/textile/ を参照するとたくさんのパターンがあります。自分で一つピックアップしてパターンを生成するプログラムを記述してみましょう。