HTML5でパーティクル

あむちょです。

またまたHTML5とjavaScriptによるプログラムの話。

PR アプリ作ってます

よくある粒子がワチャワチャ動くやつ(パーティクル)を作ってたら、あべっちに本気で気持ち悪いと言われてショックだったので、もっと気持ち悪くしてみた。

画面をクリックorタップしたまま移動してみてね。Particleをネットで調べた時に載ってた例文をそのままタイトルに。

Particles of Malice

悪意のかけらって意味らしいです。かっこつけてます。

つきまとう感じの動きにしようとしたら、肝心の粒子の動きが、ちょっと残念な感じになってしまったけど気にしない。

目玉の動きは、クリックした座標(tempX,tempY)と目の中心座標(structEye.x.structEye.y)のなす角度を使ってsin,cosして決まるけど、sin^-1のメッソドを調べるのがめんどくさいのと、なんか重そう(測ってないのでわかりません)だったので、本来のsinθ=縦/斜め,cosθ=横/斜めで求めてます。

<br />
var delX=structEye.x-tempX;<br />
var delY=structEye.y-tempY;</p>
<p>if(Math.abs(delX) &lt; 8 &amp;&amp; Math.abs(delY) &lt; 8){<br />
    structEye.x1=tempX;<br />
    structEye.y1=tempY;<br />
}<br />
else{<br />
    var r=Math.sqrt(Math.pow(delX,2)+Math.pow(delY,2));</p>
<p>    structEye.x1=structEye.x-8*delX/r;<br />
    structEye.y1=structEye.y-8*delY/r;<br />
}<br />

クリックしている座標が、目玉の稼働範囲内ならそこを目玉の座標としてます。

それにしても画像を使わずに描画メソッドのみで書くのは手間がかかって大変です。グラフィックの大切さが身にしみます。

あべっち、いつもありがとね( ◉◞౪◟◉)

 

コメント