HTML5で手筒花火
|あむちょです。
友達からブログが最近ほんとつまらんと言われてますが辞めません。友達にとってつまらないほど、検索効果が高いです。
相変わらずHTML5とjavaScriptの話。
豊橋と言えば手筒花火が有名ですね。私も今年初めてやりました(やらされました)。
当初は噴水っぽいのを作る予定だったけど、気づいたら手筒花火っぽいのになってた。
相変わらず目的もなく画面をクリックorタップしたまま移動するだけ。今までで、一番重たいのでAndroidでは壊滅的、iPhoneはiPhone5以外きついかも。
Fountain
今回は円のアイデンティティを捨て、線をテーマにしてます。
放物線はy=a(x-b)^2+cで表されるので、クリックした座標を(tempX,tempY)、頂点座標との差を(rndX,rndY)とすると、線の軌跡は
y=rndY/rndX^2{x-(tempX-rndX)}^2+(tempY-rndY)で求まります。
<br /> struct[num].a=struct[num].rndY/Math.pow(struct[num].rndX,2);<br /> if(struct[num].turnFlag)struct[num].b=x+struct[num].rndX;<br /> else{<br /> struct[num].b=x-struct[num].rndX;<br /> }<br /> struct[num].c=y-struct[num].rndY;</p> <p>struct[num].drawFlag=true;<br />
求めた点を直線でつないだだけなので、カクカクです。一応HTML5ではベジェ曲線もサポートしてるみたいなので、そっち使えば楽できそうです。
ちなみに、やった後の手筒花火は玄関に飾るのがお約束みたいですが、家では
傘置きとして活躍中
[ad]