this!TwitterFacebookGoogle+Linkedin最近スケッチの動きにバリエーションを出したくて、先日はp5.jsでのベクトルの使い方をちょっと勉強してみました。・p5.jsのベクトルで加速度や引力を扱ってみる・p5.jsでミニゲーム「メテオロイド」を作ってみたベクトルのほかに使ってみたかった手法に「イージング」というのがあります。Web系やゲーム系のフロントエンド開発などではおなじみですよね。オブジェクトを動かすときに、動きはじめと終わりの間で移動速度を変化させて、スムーズな動きを演出する方法です。CC)を使っていたことがあるのですが、その時はとても簡単にイージングが使えていました。Flashのタイムライン上でアニメーションの開始と終了のフレーム、オブジェクト位置を指定して、その間に「トゥイーン」(恐らくFlash用語。betweenに由来?)を作成。その「トゥイーン」に「イージング」を適用するという操作が、全部GUIからできたんですよね。いやー、Flashっていいツールだったよなー。FlashオルタナティブなJSライブラリ群として登場した「CreateJS」にも、「TweenJS」というライブラリがあり、その中に含まれる「Ease」というクラスでFlashライクなイージングの手段を提供しているようです。Gistにこんなファイルを公開されている方がいらっしゃいました。Javascriptコードを見てみると、連想配列のキーになっている「linear」「easeInQuad」などがイージングのタイプ。バリューはそれぞれ「t」(time)を引数にとる無名関数となっています。引数として「0~1」の数値(動き始めが0で目的地到達時が1)を与えてやると、その時点での位置を「0~1」(動き始めの位置が0で目的地が1)を返してくれるようです。・動き始めてから現在までの時間(到達目標時間との比率を0~1で)といった値を持っておけば、ここにある関数を使って、動きのイージングができそうです。...で、いろいろゴチャゴチャやりながら作ってみたのが次のスケッチです。easeOutQuint版(クリックすると別タブが開きます)スタートすると、65個のドットが中央から飛び出して2500ミリ秒でそれぞれの目的地に「easeOutQuint」のイージングで移動します。初速速めで、目的地に近づくにつれて「スッ」とスローダウンする感じの動きになっているのが分かっていただけるかと。移動完了後は同時間の休憩を挟んで、次の目的地へ移動...というのを延々と繰り返します。カンバス上のどこかをマウスクリックすると、すべてのドットの目的地がマウス位置に設定され、一斉に集合してくるというおまけを入れてみました。それだけだとちょっと面白くなかったので、各ドットの位置がある程度近づいたときに(別のドットの中心が、自分の中心から直径の4倍以内の位置にあるとき)自分と相手の中心を線で結ぶという処理も入れてみました。休憩時の線の結ばれ方が、星座盤のようにも見えるので「ニセ星座ジェネレーター」と名付けてみました。コードはこんな感じになっています。Date.now();});}1行目で「easeOutQuint」という定数に、先ほどのGistにあった式を割り当てており、x座標値とy座標値のアップデート時に関数として呼び出しています。この部分を変えてやることで他のイージングスタイルへの変更もカンタンです。先ほどのGistでは、他の方がコメントとして「ElasticEasing」の式をアップされていました。1行目とアップデート部分の記述をちょっと変えてやると、こんな動きになります。easeInElastic版(クリックすると別タブが開きます)ドットが目標地点にゴムで引っ張られて「ぼよよーん」と震えながら止まるような動きになっています。これはこれで面白いですね。これで作りたい表現に合わせてイージングが使えそうです。なんとなく「時間までに決まった場所へ移動する」ことが重要な時には「イージング」が、「移動物体自体の持つスピードや加速度、他物体とのインタラクション」が重要なときには「ベクトル」が使いやすそうな気がします。あと、イージングの場合は移動だけでなく、サイズの変更などにも応用が利きそう。積極的に使っていきたいと思います。IT分野を中心に活動するフリーランスライター・編集者。経歴や執筆実績については「ABOUT」にまとめています。infosmith.biz。