目次
基本的な事項
今回は正方形の並べ方を工夫して、簡単なアートを作成してみます。以前木のフラクタル図形を作成してみよう！という記事で、木を描画するプログラムを紹介しましたが、今回もアプーローチは基本的に同じです。まずは図形を描画する基本的なアルゴリズムを考えて、次にランダム性を持たせて複雑な図形を描画できるようにしていきます。
まず、四角形を均等に配置していくプログラムを作成するために、下図のような座標系を考えます。1つめの四角形は原点からlpaddの位置にあるとします。つまりlpadは余白の領域の広さを表しています。四角形の大きさはL×Lとします。このとき1番目の四角形の中心の座標は(lpad+L/2,lpad+L/2)となります。あとは四角形の中心座標をL/2ずつずらしてけば、正方形を並べることができます。
これらのことから、正方形の中心座標は次の数式で表すことができます。添字のiは正方形が左から何番目にあるか、jは上から何番目にあるかを示しています。この式を使ってProcessingで正方形を並べるプログラムを作成していきます。
正方形を並べるコード
正方形を単純に左上から配置していくコードと実行結果を示します。
1行目から4行目でパラメータを定義していますが、その意味は表に整理してあります。5行目で定義しているグローバル変数は、正方形のx座標とy座標で、draw関数内で使用しています。
setup関数では、ウィンドウサイズや背景色の設定などを行なっています。draw関数では、実際に正方形を描画する処理を行なっています。2つのfor文で正方形の中心座標(xpos,ypos)をずらしながら、rect関数で正方形を描画しています。
実行結果から意図した通りにプログラムが動作していることがわかります。
パラメータ
| パラメータ名 | 値 | 意味 |
| columns | 30 | 横に並ぶ正方形の数 |
| rows | 35 | 縦に並ぶ正方形の数 |
| sqrsize | 20 | 正方形のサイズ（辺の長さ） |
| padding | 40 | 余白の広さ（ひとつめの正方形の位置） |
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | int columns = 30; int rows = 35; int sqrsize = 20; int padding = 2 * sqrsize; float xpos, ypos; void setup() { size(680, 800); background(255); stroke(0); rectMode(CENTER); noLoop(); } void draw() { for (int y=1; y <= rows; y++) { for (int x=1; x <= columns; x++) { pushMatrix(); xpos = (x-0.5) * sqrsize + padding; ypos = (y-0.5) * sqrsize + padding; translate(xpos, ypos); rect(0, 0, sqrsize, sqrsize); popMatrix(); } } } |
実行結果
ランダムな要素を追加してみよう
先ほどの例では、正方形をを均等配置しただけなので、あまり面白みがなかったもしれません。ここからは正方形の位置や角度、色をランダムにしてみてアートっぽさを出してみます。
位置と色を乱数で指定してみる
次のコードでは、正方形の位置と角度、色を乱数で変化させています。コード16行目で加算合成モードを指定することで、正方形が重なったところが明るくなるようにしてみました。27行目〜29行目ではrandom関数を使って、正方形の位置と角度にランダム性を持たせています。34行目でも同様にrandom関数で正方形の色を乱数で指定しています。このコードをProcessingで実行すると、実行結果のような画面が表示されます。
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | int columns = 30; int rows = 35; int sqrsize = 20; int padding = 2 * sqrsize; float xpos, ypos; float randpos; float randval; float randang; void setup() { size(680, 800); background(0); stroke(0); rectMode(CENTER); blendMode(ADD); noLoop(); } void draw() { for (int y=1; y <= rows; y++) { for (int x=1; x <= columns; x++) { pushMatrix(); randval = random(-5.0, 5.0); randpos = randval; randang = radians(randval); xpos = (x-0.5) * sqrsize + padding + randpos; ypos = (y-0.5) * sqrsize + padding + randpos; translate(xpos, ypos); rotate(randang); fill(random(255), random(255), random(255)); rect(0, 0, sqrsize, sqrsize); popMatrix(); } } } |
実行結果
先ほどのコードでは色を完全にランダムにしていますが、次の例のように色を限定しても面白いですね。具体的には、34行目のfill()とrandom()に指定するパラメーターで調整します。
実行結果
ここでは単純な3パターンを示していますが、色々な組み合わせを試せば、もっと面白い結果がえられるかもしれません。
乱数の範囲に変化をつけてみる
先ほどのプログラムでは、どの正方形でも乱数の範囲を同じにしていました。もう少し変化をつけるために、正方形の位置によって乱数の振れ幅を変えてみます。ここでは、下に行くほど（Y座標が大きくなるほど）乱数の触れ幅が大きくなるように処理を追加します。次にコードの例を示します。コードの26行目で、乱数の振れ幅randrangeを徐々に大きくしていきます。
この処理を入れることで、実行結果に示すような画像が得られます。綺麗に並んでいた正方形が徐々に崩れいていくイメージでしょうか。
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | int columns = 30; int rows = 35; int sqrsize = 20; int padding = 2 * sqrsize; float xpos, ypos; float randpos; float randval; float randang; float randstep = 0.1; float randrange = 0.0; void setup() { size(680, 800); background(0); stroke(0); rectMode(CENTER); blendMode(ADD); noLoop(); } void draw() { for (int y=1; y <= rows; y++) { randrange += (y*randstep); for (int x=1; x <= columns; x++) { pushMatrix(); randval = random(-randrange, randrange); randpos = randval; randang = radians(randval); xpos = (x-0.5) * sqrsize + padding + randpos; ypos = (y-0.5) * sqrsize + padding + randpos; translate(xpos, ypos); rotate(randang); fill(random(255), random(255), random(255)); rect(0, 0, sqrsize, sqrsize); popMatrix(); } } } |
実行結果
先ほどと同じように、色を限定した場合の実行結果も示します。乱数の振れ幅の変化のさせ方を工夫したり、アニメーションにしても面白いかもしれません。
乱数で自然を表現する
次に、乱数を使って自然なイメージを表現できないかと、考えてみました。このコードでは、楕円の大きさ、位置、色を乱数で指定しています。実行すると楕円が次々と表示されていき、キーボードのsを押すと繰り返し処理が止まった後、pngファイルが保存されます。結果として実行結果に示すような画像が得られます。空に浮かぶ斑雲といったイメージでしょうか。
このように、乱数を使って自然に見られるような画像を作成することも可能ですので、アルゴリズムを工夫していけば、もっと面白い結果が得られそうですね。
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | int n = 1000; float randang; float randsca; void setup() { size (600, 600); colorMode(HSB, 360, 256, 256); background(0); noStroke(); rectMode(CENTER); } void draw() { for (int i = 0; i < n; i++) { pushMatrix(); translate(random(width), random(height)); randang = random(PI/2); randsca = random(0.5, 2); rotate(randang); scale(randsca); fill(220, random(130, 200), 255, 50); ellipse(0, 0, random(2,15), random(2,15)); popMatrix(); } } void keyPressed() { if (key == 's') { noLoop(); save("image/ellipse.png"); } } |
実行結果
まとめ
この記事では、乱数を使ってお手軽にアートを作る方法を紹介しました！今回は単純なアルゴリズムで画像を作成してみましたが、今後は自然界の現象を参考にしながらアルゴリズムを工夫していき、もっと色々なものを創り出していきたいと考えています！！
コメントを残す