JS勉強会 ―EaselJSを使ってマウスから逃げるインタラクションができるまで vol.2―

JS勉強会 ―EaselJSを使ってマウスから逃げるインタラクションができるまで vol.2―

JS勉強会 ―EaselJSを使ってマウスから逃げるインタラクションができるまで vol.2―


大体毎週金曜日の朝、@cocoponさんにJSのあれこれを教わる勉強会を開催しています。

今回、EaselJSを使用したマウスインタラクションコンテンツができたので
成果物とそれを作るまでの経緯を学習メモとしてまとめた記事vol.1の続きの記事となります。

前回は一つの円に対して、マウスが近づくと逃げつつも、元の位置に戻ろうとする動きまでを実装しました。


>> 別ウインドウで見る

今回はそれにさらに手を加えて、より参考としているサイトの動きに
近づけていきたいと思います。

 

STEP5: 円周上にランダムに並べる

前回一つの円だけだったものを、ドーナツのような形になるように並べてみました。


>> 別ウインドウで見る

これまで1つだった円が、100個の円をランダムにドーナツ状に並べただけで、
より質感が出てスクリーン上の円の集合体に質量が生まれてきたような感覚がありました。

 

STEP6: 円周上にランダムに並べた円それぞれがランダムに動く(動かない編)

今回参考にさせていただいているNamaleでは、円それぞれがマウスの位置とは無関係にランダムに動いていました。
そこで、それを実装してみました。(実装したかったです。)


>> 別ウインドウで見る

どんどん円が逃げていってしまいました。。

 

STEP6(2): 円周上にランダムに並べた円それぞれがランダムに動く(動いた!編)

今度はちゃんと動きました!

>> 別ウインドウで見る

マウスが来た時に戻るべき位置this.defaultX,this.defaultY
var distantDefault = Math.sqrt(Math.pow((this.defaultX - this.saveDefaultX),2) + Math.pow((this.defaultY - this.saveDefaultY),2));
this.defaultX -= (this.defaultX - this.saveDefaultX)*distantDefault*0.01;
this.defaultY -= (this.defaultY - this.saveDefaultY)*distantDefault*0.01;

として動かしているものに、さらにマウスとの動きを加える事で、
・もともとランダムに動きつつもドーナツ状を崩しすぎない
・マウスが近づいたら逃げつつも元に戻りたがる
という動きとなっています。

また、@fladdictさんによりGUILDで開催されている「インタラクティブ勉強会」で学んだことを活かし、
ただのMath.random()ではなく、2回かけることで簡易的に小さい円を多く、
大きな円ほど少なくなるように
circleRadius: Math.random()*Math.random()*9+1としています。

 

まとめ


>> 別ウインドウで見る

少し色など調整してみました。

 
このようにただ見ていたものを実際に作ってみることで、
正確な物理演算をするのではなく、擬似的に表現するための手法や、
ディスプレイ上のものに質量を生み出すための工夫、
randomを扱いつつもただのrandomにはしない、など
多くのことに気づくことができました。

それぞれの円の色を写真から抽出した色に合わせてみたり、
円の大きさを小さめのものだけにしてぎっしり並べてみたり、
文字のように並べてインタラクティブなロゴとしてみたり…
とたくさん妄想が膨らんだので、
今回のクラスを使用しながらスタディを重ねていきたいと思います。

 
また、こういったゴリゴリなアート作品ではないけれど、
ページトップへ戻るボタンや、ナビゲーション、フォーカス時など
少しインタラクティブな要素が必要なWebサイトを作るお仕事お待ちしております笑

 
@cocoponさん、いつも本当にありがとうございます。