モーションプログラミング日和(2)「ランダム」

モーションプログラミング日和(2)「ランダム」

北千住デザイン
北千住デザイン (ID225) 公認maker 2014/08/26
0

はじめに

北千住デザインの渡邊と申します。
普段は、プログラムを書いて、インタラクティブなコンテンツを作っています。

この連載では、プログラムを使って、絵を動かす、映像やアニメーションを作る、ということに焦点を当てています。毎回、よくつかわれる技法や仕組みをひとつ取り上げ、それを簡単に説明しながら、ブラウザで見られる形で、一つ何か作ってみようと思います。

第1回目はトゥイーンでした。https://media.dmm-make.com/item/307/
第2回目のテーマは、ランダムをとりあげます。

ランダムとは

プログラミング言語には、簡単にランダムな数字(乱数)を取得できる命令が備わっています。JavaScriptやActionScriptでいえばMath.random() と書くと乱数が得られます。Processingならrandom()だし phpなら、rand()です。厳密な乱数となると難しい話に突入しちゃうみたいなんですが、手軽に使う分にはこれらで十分事足ります。プログラミングでコンテンツを作ろうと思う時、乱数が使われてないものってないのではないか、というくらい使います。

ドラクエの戦闘とランダム

はじめて僕が乱数にふれたのはファミコンでした。小学生の頃ドラクエをやりまくっていました。謎解きやアイテムを手に入れてストーリーを進めることも面白いですが、大半の時間はモンスターとの戦闘に費やされます。レベル上げで嫌になったりもしますが、戦闘はRPGの醍醐味でもあります。

モンスターによってさまざまな攻撃パターンがあります。単なる攻撃をしてくるやつもいれば、じゅもんを唱えてくるやつもいれば、痛恨の一撃をくらわせてくるやつもいます。

同じモンスターであっても毎回、同じ攻撃をしてくるわけでないです。例えば、ホイミスライムならホイミをとなえるターンと、攻撃してくるターンがあって、それを毎回、ランダムに選択してくるわけです。また、受けるダメージも毎回同じではなく、ある程度の揺らぎがあったりする。

大人になってからわかったのですが、これはモンスターごとにいくつかの攻撃パターンをもっていて、毎回乱数をつかってランダムに攻撃パターンを選んでいたのです。もちろんあらかじめ用意された限られたパターンではあるけれど、ランダム性が加わることによって、僕は、そこにホイミスライムという存在をリアルに感じ、ドラクエの世界観に熱中することができました。


これが毎回同じ順番の攻撃、同じダメージなど、同じことの繰り返しだったら、そんなドキドキは生まれなかったのでしょう。

※ドラクエ2の最初あたりの戦闘。攻撃パターンやダメージの数値だけでなく、攻撃の順番、モンスターの種類・組み合わせ、などがパラメータなどを加味しつつ、ランダムに選ばれ、無数のバリエーションを作り出している。

ユニクロックとドラクエとの共通点

数年前にUNIQLOCK( http://www.uniqlo.jp/uniqlock/ )というウェブコンテンツがありました。3大広告賞を総なめ的なすごいコンテンツです。ダンスをする少女たちのさまざまな映像が、5秒間ごとにランダムに切り替わり、終わりも始まりもなく永遠に繰り返していく。

ゲームと映像作品という違いはありますが、これもドラクエのモンスターが複数の攻撃パターンから、攻撃をランダムに選ぶのに似ています。

決まった順序だったら味気ない映像だし、1度見たら分かったような気持ちになって、飽きてしまうかもしれない。でも、ランダムに組み合わせることによって、なにかつかみどころが無い、見る人に予測できない、リニアな映像では得られない感覚が生まれると思います。

※あらかじめ用意した映像がランダムに選ばれる。

ランダムを用いて何か作ってみる

紹介したドラクエやUNIQLOCKのように、時間軸が進むにつれ、ランダムにパラメータを切りかわることで、無数のバリエーションを持ち、有機的でもある、ランダムの魅力がちょっとでも伝わるようなアニメーションを目指して、制作してみました。

何を作ったかというとDMMというタイポの形状がランダムに変容するものを作りました。文字を題材としたのはランダムな形状にしたとしても、基準点として文字というのがわかりやすく、また、文字の可読性と非可読性のゆらぎがビジュアルから見ても面白いと思ったためです。

まず、ランダムを使うといっても、どんなルールの中で乱数を使うか決めなくてはらなりません。下記のような文字の基準をつくり、この各頂点を基準点とし、ここからの揺らぎを乱数で作りだし、線をつないで文字として成立させます。

1秒ごとに各基準点からのゆらぎの幅を再設定しています。基準点からある半径の中に存在するような文字の頂点を設定しています。言葉で説明するのが難しいので作品をご覧いただきつつ、ランダムとその適用ルールを考えてみてください。(クリックするとモードが切り替わります)

http://kitasenjudesign.com/dmm/02/

おわりに

ランダムいかがでしたか。ランダム・乱数が生むマジカルな表現が少しでも伝わったでしょうか。
ランダムを実感する前、コンピュータで作ったものから連想するものって無機的なシステマチックなイメージだったのですが、乱数はそれとは逆で、PCの奥でうごめいている生き物のような、よくわから
ないもので、僕がプログラミングにひかれた一つの要素でもあります。リアルタイム処理の醍醐味であるようにも思います。乱数、使ってみてください!

次回は「サイン波」を取り上げる予定です。

参考にしてくれた記事

記事が登録されていません。
この記事を参考にして、新しく記事を投稿しよう!

違反について