動きの再構成

文書の過去の版を表示しています。

p5jsを利用して、マウスカーソルに円（直径50）がくっつくプログラムを記述してみましょう。マウスカーソルの位置は変数 mouseX, mouseYで取得することができます。次のように記述すればよいでしょう。

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(100);
  circle(mouseX, mouseY, 50);
}

特段面白いものではないと思いますが、次のようなコードはどうでしょうか？p5jsのエディタごとこのページにはります。短いプログラムですが、じっくり読んでみましょう。単純にマウス位置に丸を描くのではなく、マウスカーソルの位置に徐々に丸が近づいていくプログラムにしています。

これらプログラムはどちらもマウスカーソルにくっつくプログラムであり、目的は達成しています。一方で操作して「気持ちいい」、「楽しい」と感じるのはどちらでしょうか？状況にもよるかもしれませんが、おそらく後者の方が気持ちいい、楽しいと思う人が多いのではないでしょうか？ただ動く、といってもその動きは様々です。まっすぐ移動する円であっても、徐々に早くなって、最後はゆっくり止まるといったある種の無駄な動作が、私達人間にとっては体験の楽しさや興味、注意を引く大きな仕掛けになっていることがあります。これは映像制作に限らずインタラクションでも同じことが言えます。

私達が生きるこの世界は、時間という制約のもと、すべてが連続的です。例えばボールを自分がいる場所から10メートルほど投げたとします。この時、結果は

ボールが10m先に落ちた

ということでしかありませんが、その間はボールが1,2,3,4,,,9mと距離を移動して実際には地面に落ちたわけです。つまり、いきなり10m先にボールがぽとりと落ちることはありません。当たり前のことですが、デジタルにおけるデザインではこのような過程を一切無視して表現することが可能です。たとえば、

直径50の円をx=100[px]の位置からx=300[px]の位置へ移動してください

という命題があった場合、ボールのx座標には最初に100をいれ、次にxに300を入れればおしまいです。デジタル上では非常に簡単ですが、これを現実世界に置き換えた場合、円（この場合ボールで考えてください）は必ず指定座標にいくまでも移動しなければなりません。私達の生きるこの世界はこのような連続性で成り立っており、デジタルにおけるデザインではこの関連性を常に意識しておく必要があります。あなたならどのように100[px]から300[px]までボールを動かしますか？