先週から、職場であるTHE GUILDのオフィスでインタラクティブコーディングの勉強会をやることになったので、その記録。こぢんまりと、ピザでも食べながら、とはいいつつも真面目に。

第1回目のテーマは「ランダム」

第1回目のテーマは「ランダム」。深津さんから乱数についての簡単な説明があり、実際の例をみんなで見たあとは、ほぼ自由。Processingでもくもく組んでいく。

勉強会がはじまる前に腕だめし

「ランダム」というテーマは当日の早い段階でわかっていたので、勉強会がはじまる前に、そのキーワードだけで適当なブツを組んででみた。

ばねに繋がったボールを円状に配置して、ランダムな力で順に弾いていくもの。外側に向かう速度を赤色に着色してみた。 ランダム感の恩恵があまり見られず、課題としてはうまくなかった。

ランダムウォーク

深津さんが例として用意していたのは、「ランダムウォーク」と呼ばれるもの。

ランダムウォーク（英語: random walk）は、次に現れる位置が確率的に無作為（ランダム）に決定される運動である。乱歩（らんぽ）、酔歩（すいほ）とも。グラフなどで視覚的に測定することで観測可能な現象で、このとき運動の様子は一見して不規則なものになる。

要は、点が不規則に動くやつ。 一言で「不規則」といっても、色々な種類がある。位置座標をランダムにしたもの、速度をランダムにしたもの、加速度をランダムにしたもの…。何をどのようにランダムにするかによって、無限の動きが生まれる。

深津さんのこさえた例では、10種類以上の動きを持つ点がうごめいていた。

ひたすら作って、改良していく

まずは普通に組んでみる。加速度の方向と大きさをランダムに。

これだけだと味気ないので、さらにパラメータを活かすことを考えてみる。 速度の大きさを点のサイズに反映してみよう。

少しだけ生き生きしてきた気がする。 どっちに進むか、方向性を持たせたらどうだろう。

いい感じ。進行方向に長い円となるよう改良したら、何だかミドリムシみたいになった。 ここで深津さんからアドバイス。

なるほどー。例えばこういうことですよね。

Processingでは、bezierVertex関数を使うだけでベジェ曲線のシェイプが作れる。なんてカンタンなんだ…。

動きのパラメータも詰めまくって、最終的にこうなった。

あふれる微生物感！！ﾌﾆﾌﾆﾌﾆﾌﾆ!!はじめの状態から順に眺めてみると、劇的な進化を遂げてきた様子が実に微笑ましい。 これでも、無限にある動きの中のたった1種類に過ぎないんだぜ…。ランダムウォーク、奥が深い。

—

ちなみに、ProcessingのスケッチをアニメーションGIFに変換する際は、gifAnimationというライブラリを利用している。サクッと使うには機能が足りないので、ラッパークラスをこさえた。

このクラスを使えば、「10秒間録画」や「1フレームずつスキップして容量節約」のような機能が数行で実現できる。

次回へ続く。