動きの再構成

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]までボールを動かしますか？

上記のような考えに対して代表的な取り組みがEasingと呼ばれるものです。始点と終点が決まっている場合、その過程をどのように移動するかを関数で表現します。このことをEasing関数等と読んだりもします。AfterEffect等の映像制作ソフトウェアやアニメーション作成ソフトウェアではそのような名称を聞いたことがある人もいるかも知れません。まずは以下のウェブサイトで様々なEasing関数を確認してみましょう。

• https://easings.net/ja

私達は物理法則の中で普段生活しています．ボールを投げれば地面に落ちるし，壁に跳ね返りもします．動きの再構成の中でも特に物理演算の再構成は現実世界のシミュレーションのようで，ちょっとパラメータを変化させることで，地球上ではありえない動きをオブジェクトに与えることができます．例えば地球上では重力が働くことで，握ったボールを話せばそのまま下方向に自然落下していきます．このとき手を離れたボールは重力加速度によってどんどん速度が増し，最後は地面にぶつかります．

加速度は一秒間で増加する速度のことです．つまり時間が経過するほどどんどん速度が早くなっていきます．例えば以下のようなコードを書いてみます．

var ball = {
  x:0,
  y:0,
  v: {
    x:0.0,
    y:0.0
  }
}


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  ball.x += ball.v.x;
  ball.y += ball.v.y;
  circle(ball.x, ball.y,10);
  ball.v.y += 0.1;
}

function mousePressed()
{
  ball.x = mouseX;
  ball.y = mouseY;
  ball.v.x = 0;
  ball.v.y = 0;
}

非常にシンプルな計算ですが，物理法則に基づいた計算を行っています．下方向に重力が生じていると考え，フレーム更新毎に下方向の速度を0.1ずつ増やしているだけです．結果としてボールが自由に落下しているように感じられると思います．

では次は地面にぶつかったときに跳ね返らせてみます．高校物理習ったとおりですが，衝突したときにはその衝突した瞬間の速度と逆向きの速度になります．ただし同じ速度だと永遠とはね続けるので跳ね返り係数(k）を0.5などとして計算します．

var ball = {
  x:0,
  y:0,
  v: {
    x:0.0,
    y:0.0
  }
}


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  ball.x += ball.v.x;
  ball.y += ball.v.y;
  if( ball.y > 400-5 ){
    ball.v.y = 0.5*(-ball.v.y);
    ball.y = 400-5;
  }
  circle(ball.x, ball.y,10);
  ball.v.y += 0.1;
}

function mousePressed()
{
  ball.x = mouseX;
  ball.y = mouseY;
  ball.v.x = 0;
  ball.v.y = 0;
}

実行結果を確認するとたしかにボールが跳ねているように見えますね． 重力加速度を0.1としていますが，この値を変えることでボールの動きがどのように変化するかをよく観察してください．この0.1は重力加速度なので，この値が増えるということは，より重力が強い世界の場合となっています．なんだか重そうに見えませんか？落下の仕方，跳ね返り方で私達人間はその物体に対する印象が変わってしまいます．