いい感じのビジュアルをランダムになんとなく作り出す

なにかを作った。めざせジェネレーティブアートジェネレータ!

screenshot

クリック/タップで別の絵を作ります。

この手のものの難しさは、

という具合に自由度を高くしていろんなバリエーションを作ろうとすると見てて面白いものができあがる打率が減って、逆に打率を上げようと面白くなさそうなものをフィルタリングしていくと自由度が低くなること。

自由度を高くするにはランダムにするものを増やせばいい。今回は座標と線の太さと色を表す数式を乱数で作った。といってもあまりに適当にすると打率が下がるから、

パラメトリック方程式

この辺に出てくる数式をぐっとにらんでよく使われてそうな関数を適当にチョイスする。今回は

a + b, a - b, a * b, a / b, 
sin(a), cos(a), exp(a), pow(a, b), noise(a), 
a > b ? c : d

を使った。noiseはp5.js組み込みのパーリンノイズ。あと、sinとcosはパラメトリック方程式に頻出しているような印象があるので多少出現頻度を上げる。

a, b, c, dのところには、

  • 上記関数を再帰的に、ただし再帰が深くなるにつれ抑制する
  • 開始からの秒数を表す変数t
  • 先頭から何番目の点であるかを表す変数i
  • 2から10のランダム整数aまたはb

のどれかを当てはめる。これで簡単にランダムな数式が作れる。

この数式をつかって点のX/Y座標、線の太さ、色(HSB)を算出する。点は10~100個用意し、その間を線でつなぐ。

あとX/Y座標の数式のパターンとして、X座標のsin, cosをcos, sinに入れ替えてY座標の数式とするという小細工を半分の確率でする。数式を作っているコードは以下。

formula.ts

打率を制御するのは難しい。面白いかどうかはコンピュータには分からないから。

まあでも画面に何も写っていないのは面白くないだろう。なので数式から出る数値を多少いじる。

X/Y座標、線の太さ、色の各点の数値の最小値と最大値を記録しておいて、それら数値が所望の範囲に収まるように補正する。X/Y座標は画面サイズの横/縦のピクセル数、先の太さは画面サイズの1/8くらいまで、色を表すHSBは0~360, 50~100, 50~100に。以下のコードのformulaRangesを使ってその辺の調整をしている。

main.ts

それ以外の調整はしてない。あとはひたすらクリック。なので現状たまに面白いビジュアルが出るのは、たまたまだね。たまたま出た面白パターンをGitHubのREADMEに置いてある。

https://github.com/abagames/folmura

こうやって何かを作る手法を、個人的にガチャ指向プログラミングと呼んでいる。ランダムに絵や音やレベルやゲームが出てくる仕組みを作って、あとはひたすら面白いものが出るまでガチャを引き続ける。プログラムを書くことなくいろんなバリエーションを得ることができるから最高に楽だ。問題は、そのガチャの仕組みを作るのが楽じゃないところだね。というかこれはプログラムパラダイムではないね。