ここぽんのーと

コードとデザインの境界に生きるエンジニアの、雑多な記録帳。

インタラクティブコーディング勉強会 第1回「ランダム」ウォークでフニフニ微生物

2014/10/26, cocopon

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

(勉強会のまとめページはこちら)

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

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

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

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

out

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

ランダムウォーク

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

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

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

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

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

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

out

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

out

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

out

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

2014-10-26 20.21.37

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

IMG_3172

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

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

out

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

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

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

次回へ続く。

(勉強会のまとめページはこちら)