先週から、職場であるTHE GUILDのオフィスでインタラクティブデザインの勉強会をやることになったので、その記録。こぢんまりと、ピザでも食べながら、とはいいつつも真面目に。
第1回目のテーマは「ランダム」
第1回目のテーマは「ランダム」。深津さんから乱数についての簡単な説明があり、実際の例をみんなで見たあとは、ほぼ自由。Processingでもくもく組んでいく。
勉強会がはじまる前に腕だめし
「ランダム」というテーマは当日の早い段階でわかっていたので、勉強会がはじまる前に、そのキーワードだけで適当なブツを組んででみた。
ばねに繋がったボールを円状に配置して、ランダムな力で順に弾いていくもの。外側に向かう速度を赤色に着色してみた。
ランダム感の恩恵があまり見られず、課題としてはうまくなかった。
ランダムウォーク
深津さんが例として用意していたのは、「ランダムウォーク」と呼ばれるもの。
ランダムウォーク（英語: random walk）は、次に現れる位置が確率的に無作為（ランダム）に決定される運動である。乱歩（らんぽ）、酔歩（すいほ）とも。グラフなどで視覚的に測定することで観測可能な現象で、このとき運動の様子は一見して不規則なものになる。
要は、点が不規則に動くやつ。
一言で「不規則」といっても、色々な種類がある。位置座標をランダムにしたもの、速度をランダムにしたもの、加速度をランダムにしたもの…。何をどのようにランダムにするかによって、無限の動きが生まれる。
深津さんのこさえた例では、10種類以上の動きを持つ点がうごめいていた。
ひたすら作って、改良していく
まずは普通に組んでみる。加速度の方向と大きさをランダムに。
これだけだと味気ないので、さらにパラメータを活かすことを考えてみる。
速度の大きさを点のサイズに反映してみよう。
少しだけ生き生きしてきた気がする。
どっちに進むか、方向性を持たせたらどうだろう。
いい感じ。進行方向に長い円となるよう改良したら、何だかミドリムシみたいになった。
ここで深津さんからアドバイス。
なるほどー。例えばこういうことですよね。
Processingでは、bezierVertex関数を使うだけでベジェ曲線のシェイプが作れる。なんてカンタンなんだ…。
動きのパラメータも詰めまくって、最終的にこうなった。
あふれる微生物感！！ﾌﾆﾌﾆﾌﾆﾌﾆ!!はじめの状態から順に眺めてみると、劇的な進化を遂げてきた様子が実に微笑ましい。
これでも、無限にある動きの中のたった1種類に過ぎないんだぜ…。ランダムウォーク、奥が深い。
—
ちなみに、ProcessingのスケッチをアニメーションGIFに変換する際は、gifAnimationというライブラリを利用している。サクッと使うには機能が足りないので、ラッパークラスをこさえた。
このクラスを使えば、「10秒間録画」や「1フレームずつスキップして容量節約」のような機能が数行で実現できる。