vol.1―chocolu2015年6月8日いつからか、大体毎週金曜日の朝、@cocoponさんにJSのあれこれを教わる勉強会を開催しています。雰囲気で書いてきてしまっていたJavascriptを基礎からきちんと教えて頂いてきました。今回、EaselJSを使用したマウスインタラクションコンテンツができたので成果物とそれを作るまでの経緯を学習メモとしてまとめました。・マウスを近づけるとマウスから逃げる・マウスから離れると元の位置に戻ろうとする・元の位置と離れすぎない位置でランダムに動くをEaselJSの練習がてら、実装してみたいと思いました。マウスに円を追随させるまずは、マウスの位置と円の位置を連動させて、マウスに円がついてくるようなものを作りました。{circle0.update(stage.mouseX,stage.mouseY);stage.update();}}Circleというクラスを生成して、オプションとして、色と最初の位置を渡しています。マウスから円が逃げる次に、マウスから円が逃げるようにしました。マウスの位置と自分の位置を認識して、マウスとは反対の方向に動く=逃げる、という動きです。{circle0.update(stage.mouseX,stage.mouseY);stage.update();}}ベクトルの話を思い出して楽しくなってきました。マウスから近づくほど円が逃げる次に、マウスからただ逃げてしまうのではなく、マウスが近づくほど円の逃げる力が大きくなるようにしてみました。近づくほど激しく逃げる動きを作っています。0.975と35というのは、ざっくりと調整した際のパラメータです。元の位置に戻ろうとするようにしました。戻るように位置を引き算しています。ここまででvol.1を終了としたいと思います。一個一個の円を円形に並べて、参考にしているサイトに近づけていきます。・元の位置に戻ろうとする力を考慮するだけで、急に生命感を帯びてくるのはとても勉強になりました。細部の動きのチューニング、命を吹き込むポイントまでいつも丁寧に教えてくださる@cocoponさん、本当にありがとうございます。