CreateJS実践講座

オブジェクト間の距離によって処理を分ける

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
2点間の距離は「三平方の定理」で求められます。距離を比較として用いるときは、2乗のまま比べると手っ取り早いです。
講師:
07:06

字幕

このレッスンでは 2つのオブジェクトの間の距離を調べて 処理を分けるということを 説明したいと思います 今 画面で見ているたくさんのオブジェクト これはオブジェクト同士の間に 引き合うバネのような力を与えています バネのような というのは 距離が離れれば離れるほど その力が強くなるということです 単純に適応していると ちょっと不都合なことがありますので それを距離を調べて調整したいと思います オブジェクト同士の間に バネのような力がかかって 伸び縮みするような動きをしていた その html ドキュメントを DreamWeaver で開きました 力を評価する どのような力を オブジェクト1にかかるかというのは この spring という関数で調べています 2つのオブジェクトの間の距離を調べ 距 離に比例した加速度を XY について調べています その計算した加速度をオブジェクトの velocityX velocityYというのが 速度を持つプロパティなんですが そこに足しこむ オブジェクト間で反対方向の力が お互いに引き合う力がかかるように 加速度を一方には足して 一方には引いています そうすることでオブジェクトが 離れれば離れるほど 引き合う力が強くなります 初めはそれでもいいのですけれど しばらく見ているとちょっと 不都合なことが起こります では 確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です オブジェクトが離れると また集まってくる くっついてくると これだけ見ていると さほど問題なさそうに見えるのですが しばらく放っておいたのがこちらです 動きがかなり激しくなっています というのはランダムに位置を決めていますので たまたま凄く離れたオブジェクト同士が見つかると 凄い力で引き合ってしまいます そうすると その引き合った結果 また凄く離れてしまうということで 離れたオブジェクトがでてきます そうすると離れたオブジェクトと また いままで普通に動いていたオブジェクトの間が たまたまそれも引っ張られてしまう ということになると お互いにどんどん引き合う力が強くなって バラバラになってしまうんですね ということなので 距離制限を設けたいと思います では 距離を調べるにはどうしたらいいか というところから説明しましょう オブジェクト同士の間の 距離を調べて加速度を計算していく この spring という関数なんですが それは2つのオブジェクトの X座標Y座標を調べ それぞれの差をとっています そして その差に従って X方向 Y方向の加速度 速度を求めるんですが この差をそれぞれ二乗します まずは X方向のその二乗 square としましょう squareX は distanceX の二乗です 二乗というのは2つ掛け算してしまったほうが 実は手っ取り早かったりします ですので distanceX 掛ける distanceX とします 同様に Y ですね Y のほうも調べます X 座標の差と Y 座標の差 それぞれを二乗します その二乗したものをお互い足すと 3平方の定義で 2つのオブジェクトの距離が求まります X 座標の差の二乗 足す Y 座標の二乗の差 というのは距離の二乗になります ですから 距離がこれ以上大きくなったら 引き合う力を加えないという場合には この距離に従って 距離を調べて処理を行えばいいです では距離が例えば 100ピクセルよりも大きかったら 引き合う力を与えないというなら この2つを足して その平方根を 求めるということになるのですが 平方根を求める必要はないです なぜかというと 距離そのものを調べたいのではありません 距離が100ピクセルよりも 大きいか小さいかだけ調べたい ということなのですから 別に距離じゃなくていいのです 距離の二乗を調べてしまっていい ですから距離の二乗が 100の二乗よりも小さければ 当然 距離は100よりも小さい ということになります ですから条件判定の中で 二乗 squareX とそれから Y の二乗 squareY を足したときに それが距離の二乗よりも小さければいい それは limit という変数に 入れることにしましょう では limit という変数は 上のほうにまとめてある所に加えます 分かりやすいように max として 本当は100ピクセルにしたいんだよと けれども二乗で比べたほうが早いから max の二乗と ここも max 掛ける max にしてしまいます としてあげれば100ピクセルよりも 大きいか小さいかというのが こちらの判定文で調べられますね 100ピクセルよりも小さい時のみ この加速度を計算し 加速度を速度に加える という処理がおこなわれます これよりも離れてしまったら その処理は行われません ですからこうしてあげることで 距離制限ができたということになります では確認しましょう 「保存」して「ブラウザでプレビュー」します ちょっと比較がないので わかりにくいかもしれませんが 先ほどよりは ずいぶんと緩やかに動いてますね ぶんぶんと動くものが なくなってきているというのは 一人だけはずれてしまったオブジェクトは 他と引っ張り合う力が加わらなくなります もっとも端から消えたら 例えば左端から消えると右端から出てくる 上端から消えたら下端から出てくる ということになりますので 行ったきりにはなりませんので 他のオブジェクトと近づけば 100ピクセルよりも近づけば また 引き合う力が お互いに加わるようになりますので 比較的 穏やかな動きになるということです このレッスンでは2点間の距離を調べて その距離によって処理を分ける という書き方をご紹介しました 2点間の距離というのは 三平方の定理で求まるので X座標の差とY座標の差を それぞれ二乗してあげると それを足したものが距離の二乗になります 距離が欲しい時はその二乗された距離を 平方根をとらなければいけないのですが 単に比較をする場合には 二乗のまま比較をしていいということなので 二乗の和を制限を設けたい距離 二乗した値を持っておいて比べるということで 距離がある値よりも大きいか小さいか 切り分けることができました

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

3時間26分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年07月07日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。