徐々にHTML5のCanvasを実用として使ったサイトを見る機会が増えてきました。

自力でもCanvasを扱えるようになるため、実際に作ってみることにしました。

こちらのサイト(→https://layervault.com/)のトップCanvasアニメーションが面白かったので、

マウスを近づけると立ち上る円が避けていく動きを、再現してみました。

↓こちらが作ってみたもの

DEMO

今回は1つずつしか円が出てこない簡単なものにしました。

方法

まずはこちらがコード

HTML

XHTML

<canvas id="test" width=" 300" height="300"></canvas>

1	<canvas id="test" width=" 300" height="300"></canvas>

 JavaScript

JavaScript

$(function(){ /*--変数初期化--*/ //円の初期座標 var cnt = -30; var cy = 330; var cx = Math.random() * 330; var cr = Math.random() * 40; //マウスの座標初期化 var mx = 0; var my = 0; var mr = 10; //反応させるマウス周辺の半径 setInterval(drawCircle, 5); function drawCircle(){ //canvas初期化 var canvas = document.getElementById("test"); var ctx = canvas.getContext("2d"); //マウス座標取得 $("#test").mousemove(function(e){ mx = e.clientX - 100; my = e.clientY - 100; }); cy = cnt; //マウスが円に当たると、円が避ける if(((cx - mx)*(cx - mx)) + ((cy - my)*(cy - my)) <= (cr+mr)*(cr+mr)){ if(mx > cx){ //マウスが円の左なら右に、右なら左に避ける cx -= 0.5; }else if(mx <= cx){ cx += 0.5; } if(my > cy){ //マウスが円の上のほうなら減速、逆なら加速する cnt += -0.5; }else{ cnt -= -0.5; } } //canvas描画 ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0,0,300,300); // canvas を消去 ctx.beginPath(); ctx.fillStyle = "rgba(125,125,215,0.5)"; ctx.strokeStyle = "rgba(125,125,215,0.5)"; ctx.arc(cx, cy, cr, 0, Math.PI * 2, false); ctx.stroke(); ctx.fill(); cnt--; //円が画面いっぱいまで上ったら初期値に戻す if(cnt < -30){ cnt = 330; cy = Math.random() * 330; cr = Math.random() * 40; } } });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

$(function(){   /*--変数初期化--*/ //円の初期座標 var cnt = -30; var cy = 330; var cx = Math.random() * 330; var cr = Math.random() * 40; //マウスの座標初期化 var mx = 0; var my = 0; var mr = 10; //反応させるマウス周辺の半径 setInterval(drawCircle, 5);   function drawCircle(){   //canvas初期化 var canvas = document.getElementById("test"); var ctx = canvas.getContext("2d");   //マウス座標取得 $("#test").mousemove(function(e){ mx = e.clientX - 100; my = e.clientY - 100; });   cy = cnt;   //マウスが円に当たると、円が避ける if(((cx - mx)*(cx - mx)) + ((cy - my)*(cy - my)) <= (cr+mr)*(cr+mr)){ if(mx > cx){ //マウスが円の左なら右に、右なら左に避ける cx -= 0.5; }else if(mx <= cx){ cx += 0.5; } if(my > cy){ //マウスが円の上のほうなら減速、逆なら加速する cnt += -0.5; }else{ cnt -= -0.5; } }   //canvas描画 ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0,0,300,300); // canvas を消去   ctx.beginPath(); ctx.fillStyle = "rgba(125,125,215,0.5)"; ctx.strokeStyle = "rgba(125,125,215,0.5)"; ctx.arc(cx, cy, cr, 0, Math.PI * 2, false); ctx.stroke(); ctx.fill();   cnt--;   //円が画面いっぱいまで上ったら初期値に戻す if(cnt < -30){ cnt = 330; cy = Math.random() * 330; cr = Math.random() * 40; }   }   });

 

アニメーションする円の座標と、マウスの座標を利用して、

マウスを近づけると円がマウスを避けるように動きます。

衝突判定はこちらのサイト(→http://marupeke296.com/COL_2D_No3_PointToCircle.html)を参考にさせていただきました。

 

マウスの座標　横方向：mx　縦方向：my
反応させるマウス周辺の半径　mr

アニメーションする円の座標　横方向：cx　縦方向：cy
アニメーションする円の半径　cr

として、

(cx – mx)*(cx – mx)) + ((cy – my)*(cy – my)) <= (cr+mr)*(cr+mr)

が成立するとき、反応するようにしました。

マウスが円の左なら右に、右なら左に避け、マウスが円の進行方向にあれば減速、逆なら加速するようにしました。

JavaScript

//マウスが円に当たると、円が避ける if(((cx - mx)*(cx - mx)) + ((cy - my)*(cy - my)) <= (cr+mr)*(cr+mr)){ if(mx > cx){ //マウスが円の左なら右に、右なら左に避ける cx -= 0.5; }else if(mx <= cx){ cx += 0.5; } if(my > cy){ //マウスが円の上のほうなら減速、逆なら加速する cnt += -0.5; }else{ cnt -= -0.5; } }

1 2 3 4 5 6 7 8 9 10 11 12 13

//マウスが円に当たると、円が避ける if(((cx - mx)*(cx - mx)) + ((cy - my)*(cy - my)) <= (cr+mr)*(cr+mr)){ if(mx > cx){ //マウスが円の左なら右に、右なら左に避ける cx -= 0.5; }else if(mx <= cx){ cx += 0.5; } if(my > cy){ //マウスが円の上のほうなら減速、逆なら加速する cnt += -0.5; }else{ cnt -= -0.5; } }

 

参考にしたサイトと、反応したときの動きの早さなど、違いはありますが、基本的な動きはこれでよさそうです。

後は複数の円の表示に対応させれば、あのアニメーションを再現できそうです。