こちらのgenerative artistryというサイトで、
巣のJavaScriptのみで美しいパターンのチュートリアル集を発見しました。
https://generativeartistry.com
今回は、上記リンク内の01番目のコードをsketchのインスタンスモードで書き直しましたので、パターンを作る際の簡単な考え方について説明します。
考え方はざっくりまとめると、
です。
これがパターンを作る際の最も大事なポイントです。
これは言い換えると、最終的な絵はどうなるか作る本人もわからないということです(ある程度想像はしますが)。
デザイナーやアーティストは、最終的にどんな絵を描くか決めてからペンを走らせます。
そして、その描いたとおりに、絵を描いて完成させます。
一方、パターンを作る場合は、まずはじめにルールを決めます。
そして、そのルールに従い、反復して実行し続けます。
最終的な絵は連続して無限に広がる模様を切り取ったような絵になります。
これが大きな考え方の違いです。
つまり、最終的な絵を始めに描いてコードを書き始めるのではなく、
ルールを実行することで絵を描いていきます。
この記事ではそのルールをフォーミュラ[Formula]と名付けます。
では、コードを見てみましょう。 冒頭でお見せしたCodepenのフォーミュラ部分はこちらです。
let step = 25;
function formula(x, y) {
const leftToRight = Math.random() >= 0.5;
p.stroke('#FFFFFF');
if (leftToRight) {
p.line(x, y, x + step, y + step);
} else {
p.line(x + step, y, x, y + step);
}
}これは言葉で言い換えると、
「25pxのマスの中を、ランダムで左上から右下、もしくは右上から左下に線を描く。」
となります。
Math.random()は0〜1の間の少数値をランダムで返します。
それが0.5より大きければ左上から右下へ、
そうでないなら、右上から左上へ線を描くという条件分岐ですね。
ここで非常に重要なのは、 マスのいずれかの角に線がつながっている ということです。
これでルールは完成です。
先程25pxのマスの中のルールを考えたので、
キャンバスすべてが25pxのマスでうまるように、
xとyを25pxずつ移動させ、先程の線を描く関数を実行します。
for (let x = 0; x < p.width; x += step) {
for (let y = 0; y < p.width; y += step) {
formula(x, y);
}
}先程のマスの特徴は マスのいずれかの角に線がつながっている ことです。
そのマスを連続して並べることで、連続した線が完成しました。
これで完成です。
いかがでしょうか。
このように、ルールを作り、それを実行することで、
簡単にパターンを生成することができます。
あとは自分の納得の行くまで、このパターンと実行を繰り替えることで、
美しい自分だけのパターン見つけることができます。