PCHJ02開催！

先日 @PCD_Tokyo さん主催の Processing Community Hangout Japan #02 ( #pchj02 )がオンラインで開催されました。（Youtubeのアーカイブはこちら）

このイベントの中で「七夕」のスケッチを公募するというものがありました。（集まった作品は、@PCD_Tokyoさんのモーメントにまとまっています。皆さん凄い！）

もちろん私もスケッチ公募に参加し、せっかくなので #つぶやきProcessing のレギュレーションで作品を創りました。

float i,x=1,y=1,tx,C=4000000;
size(1920,1080);clear();
for(i=0;i<C*2;i++){
stroke(i>C?0x10A0C0FF:0x0AC08040);
tx=i>C?cos(x+y)/y*3*sin(y*sin(y)):cos(x*y)/y/.8;y=i>C?tan(y)-sin(x)/y:sin(x+y)+cos(x)/y;point((x=tx)*(i>C?200:200)+960,y*200+540);}#つぶやきProcessing #pchj02 @PCD_Tokyo https://t.co/vSvQju2oLg pic.twitter.com/kFUvJ6Z2f7

— はぅ君 (@Hau_kun) July 1, 2020

イベントの中で各作品の鑑賞会＆解説会があったのですが、私の作品については「解説が難しいですねー^^;」ということだったので、せっかくなので解説記事を書こうかな、と思ったのが今回の主題です。

ソース圧縮しているし、ぱっと見何やっているかわからないし、むしろ初見でこれの解説できたら変態だ。。

解説

七夕がテーマでしたので「織姫と彦星が再会を喜び、天の川を越えて手を差し伸べる」を表現しました。

読みやすいソースコード

普通にプログラムを書くと下記のような感じになります。これで多少は分かりやすくはなったのではないでしょうか。

概要（要は何をやっているのか）

「400万個の薄い点を、数式に基づいて座標を計算して打つ」を2セット行っています。1セット目が左上と右下から延びる肌色の手の部分。2セット目が中央に上下に走る青白い天の川の部分です。

詳細（要はどうなっているのか）

xとyの座標をカオス的なルールに基づいて計算して、計算結果の位置に点を打っていきます。

1セット目は

2セット目は

という計算を使います。前回の計算結果を使って次の座標を求めるという方式で、さらにxの計算にはyが、yの計算にはxが含まれており、これによりカオス的なふるまいを引き起こしています。

計算された結果はすごく小さい値なので、200倍に拡大して、point()で点を打ちます。

色は1セット目がstroke(192, 128, 64, 10)、2セット目がstroke(160, 192, 255, 16)と、第四引数のαが小さくなっています。つまりものすごく薄い点になるのですが、これを400万個打つと、点がたくさん打たれる場所とそうでない場所に分かれるため、綺麗なグラデーションが見えてくるようになります。

まとめ

カオスの数式は結果がほとんど予測できないので、試行錯誤が何百回も必要になります。今回、天の川の部分はそこそこの回数でできたのですが、手の部分は2時間ひたすら数式をコネコネして、いい感じの絵が出てくる式を探し当てました。

あと、見直してて分かったのですが、投稿したソースの

の部分は無駄でした…。10文字損したなぁ。。

---

次回のHangoutは、#つぶやきProcessing がテーマだそうです。30分コーディングチャレンジ企画に参加することにしたので、今から実装力とトーク力を鍛えておこうと思います！