Processing : PGraphicsでジェネラティブアート
はじめに
私はProcessingを使ってジェネラティブアートを作るのが趣味です．作っていくうちに「 PGraphics 使うといろんな作品が作れる！」と気づいたので紹介します．
PGraphicsの簡単な紹介
PGraphicsは簡単に言うとProcessing画面を画像として作り出すものです．
実行画面
コード
このように beginDraw() と， endDraw() の間にProcessingでおなじみの background() や ellipse() , rect() などの命令を書き込むことでPGraphics内を描画します．そして，描画されたPGraphicsは image() を使って，PImageと同じように使うことができます．
我流：PGraphicsの使い方
パネルの中だけ色違いにする
画面中心に白い円があります．この円をマウスで動かすPGraphics上だけ背景と円の色が違うようにしたいと思います．
実行画面
コード
仕組み
次の図の赤い点はPGraphicsの左上の座標，緑の点は ellipse() の中心を表しています．
Processing画面の目線
(pgX, pgY) ，円の中心を (250, 250) とします．このとき (pgX, pgY) と (250, 250) の距離は (250-pgX, 250-pgY) あります．
PGraphicsの目線
先ほどの図をPGraphicsの目線で見ます．PGraphicsの左上の座標を (0, 0) とすると，円の中心は (250-pgX, 250-pgY) になります．このようにPGraphicsの目線で見ると，オブジェクトの座標はすべて (-pgX, -pgY) を足して表すことができるのです．
作品例
では，これを使ってジェネラティブアートしていきます．
作品1:市松模様
左上から交互に背景と円が白黒逆転したPGraphicsを並べます．円の位置はランダムで決めて，それぞれのPGraphics上でも円を描いています．だから，同じ円なのに部分ごとに色が違っていきます．
モノクロ市松模様の円がエモい#Processing #creativecoding #generativeart https://t.co/mnqAJDVBNq pic.twitter.com/uC42qthZpp
— Yuki Aizawa (@Zawa_works) November 1, 2018
作品2:揺れる文字
今までのような PGraphicsの使い方をすると，Processing画面上の図形とPGraphics上の図形が一致します．PGraphics上の図形の位置を少しずらすとまるで図形が歪んだように見えます．これを文字でやってみたら結構エモくなりました．
画面を乱れさせた#processing #creativecoding#generativearthttps://t.co/ysTX8TttNk pic.twitter.com/4Kko6G1fbe
— Yuki Aizawa (@Zawa_works) November 26, 2018
おわりに
今回は私が発見した「PGraphicsアート」の紹介をしました．この手法を使った作品をいろいろ考案しているところです．よろしければこの手法を使ってみてください．これを読んだ皆さんがこの手法でどんな作品を作るか楽しみにしています！
