HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第32回 弾力のある多角形を放物線状に落とす

この記事を読むのに必要な時間:およそ 9 分

パラメータを変えて試してみよう

コードの解説は今回はここまでとする。後は,ぜひ関数の引数や変数の値など,パラメータをいろいろ変えて試してみてほしい。たとえば,以下のように頂点をつくる関数(makePoints())の引数さえ変えれば,すぐに四角形が六角形になる。さらに,2点の組を棒でつなぐ関数(makeSticks())から呼出すVerletStick()コンストラクタの引数により,棒の固さも変えてみよう※1)⁠

※1
VerletStick()コンストラクタの第3あるいは第4引数にnullを渡すと,デフォルト値が用いられる(前回の引数のデフォルト値と値の確認参照)⁠
makePoints(中心x座標, 中心y座標, 半径, 頂点数)

VerletStick(始点, 終点, 長さ, 固さ)
function initialize() {

  makePoints(100, 70, 50, 6);   // 4);

}

function makeSticks() {

  _sticks.push(new VerletStick(_points[i], _points[j], null, 0.5));

}

前回のふたつの点を棒でつなぐでご説明したとおり,固さ0.5というのは,棒に定められた長さとの誤差をふたつの点に半分ずつ割振って,直ちに補正するということだ。ところが,頂点が6つになると,誤差が一発では直せない。それどころか,その歪みが別の点にしわ寄せされる。続くアニメーションでは,その誤差がまた別の点に飛火する。その繰返しで,六角形は頂点があちこち乱れて動き,かたちが定まらなくなってしまうのだ図3)⁠

図3 六角形のかたちが歪んで定まらない

図3 六角形のかたちが歪んで定まらない

図3 六角形のかたちが歪んで定まらない

そのため,VerletStick()コンストラクタでは,棒の固さのプロパティ(elasticity)のデフォルト値をもっと小さな数値(0.2)にしてある。すると,1回のアニメーションでは,誤差は一気になくならない。イージングの動きのように,何度か繰返すうちに,目的の値にたどり着くようになる。その場合,残った誤差の分,棒は弾力をもって伸び縮みするように見える。

たとえば,パラメータを以下のように書き替えてみる。頂点数を8に増やして八角形とし,棒の固さはデフォルト値よりさらに柔らかく(0.05)した。そして,重力に当たる垂直方向の力(velocityY)を和らげて(0.05)いる。落ち方がゆっくりになるとともに,弾力は空気の甘いボールのようになる。前掲コード2にこの書替えを加えて,ご参考までにjsdo.itのサンプルとして以下に掲げた。

var velocityY = 0.05;   // 0.25;

function initialize() {

  makePoints(100, 70, 50, 8);

}

function makeSticks() {

  _sticks.push(new VerletStick(_points[i], _points[j], null, 0.05));

}

jsdo.itには[Fork]という便利な機能がある図4)⁠このボタンを押すと,コードのコピーがつくられ,自由に手が加えられる。そして,もとのコードと書き替わった行は,[View Diff]というボタンで比較表示して確かめられる。ぜひ,これらの機能を使って,試してみてほしい。次回は,もう少し処理を加えたうえで,お題を仕上げたい。

図4 jsdo.itの[Fork]と[View Diff]ボタン

図4 jsdo.itの[Fork]と[View Diff]ボタン

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書