ホーム画面に飛び交う粒子
この手のモノは、以前からありました。
現在では、パソコンなどのハードが高速化され、ブラウザのJavaScriptエンジンも高速化されているので、、数を増やしてもかなりスムーズにアニメーションするようになりました。
さらに、HTML5の機能であるCANVASを使うことで、幅の広い描画が可能になりました。
実際には、流体シミュレーションをやろうと思い、砂時計を考えていたのですが、iPhoneを逆さになったかどうかの検出がウィジェットではまだ実現できていないので、とりあえず点をたくさん飛び交わせてみました。
ウィジェットサンプル
iPhoneで閲覧している方は、サンプルをダブルタップすると拡大されますので、ウィジェット実行中の雰囲気を味わえるかと思います。
今回のウィジェットは背景を殺していますので、ここでのサンプルも真っ黒背景上で確認して下さい。
ロックスクリーン
カレンダー
特徴
合成処理globalCompositeOperationに「lighter」を使い、透過黒画像を重ねることで、残像を残しながら移動するような感じにしました。
更新履歴
2013/05/31 基本形完成
2013/06/01 イニシャルリリース
ダウンロード
ダウンロードはこちら ーーー＞ 飛び交う粒子（wp_particle.zip）
カスタマイズポイント
動きを変更する
今回のウィジェットでは、カスタマイズしやすくするために、変数を多用しています。
カスタマイズ用に用意した変数は以下の通りです。
粒子の量 part_num
粒子の速さ part_spd
粒子の大きさ part_r
3.5インチへの対応
画面の大きさも変数にしてあり、その変数で動いているので、script.js内のd_heightを960にしていただければ良いのですが、HTMLファイルの記述も変更する必要があります。
どちらにしても、1136を960にすればOKです。
今後の更新予定
パーティクルに関しては、個人的にどんどん吸収していきたい分野ですので、もっと見栄えの良いものができたら、どんどん入れ替えるか追加していきます。
このサンプル自体は、おそらく削除されることになると思います。
サイト内関連ページ
なし
