snow

2016.11.22

雪を降らせる表現です。
雪を降らせるライブラリは既存のものもいくつかありますが、今回は下記の2点に注意して自力で実装しました。

  • 数が多いので、できるだけ軽い処理にする
  • どのような画角で見ても雪の密度を同じにする

雪の定義

まずは雪単体のSnowクラスを定義します。
ランダムな動きを持たせるため、Math.random()で取得できるランダムな小数を2つ引数に取ります。
初期位置の座標は引数で受け取ったランダムな数値2つを利用して決定させます。
また、リアリティを出すためにサイズが大きいほど落下速度を早くします。

落下

軽い処理にするために、if文は使わずにすべて計算で座標を決めています。
多少冗長な感じもしますが、色々と計算を重ねることで、雪が落下を終えた際でもif文を使わずにリセット処理することができました。
具体的には、x座標/画面の高さを切り捨てることで得られる、1か0の数値を使いまわすことで、計算を行っています。

コンテナの定義

つぎに、雪達を包括するコンテナのSnowsクラスを定義します。
どのような画面サイズで見ても同じ密度にするために、ベースとなる画面サイズを決めて、現在の画面サイズと比べた比率によって雪の数を操作するようにしています。

Snowのインスタンス作成

今回は、小さな雪・中くらいの雪・大きな雪の3パターンを作成します。
インスタンスはforで回して作成していきますが、軽量化のために作成した雪の.nextに次の雪を格納しています。
1つめの雪は、自身の描画を終えた後に、.nextの雪の描画を呼び出します。
この連鎖を続けることで、描画の際にすべての雪をforなどで回す必要がなくなります。

 

ループの関数内では大中小それぞれの雪の.drawを呼び出すのみです。

 

以下、ソースコード全文です。

[snow.js]

 

[snows.js]

まとめ

雪を降らせるだけでも、細かいところに注意すると結構なコードの量になりましたが、その甲斐もあり、大量の雪を降らせていても、それなりの高パフォーマンスを出せています。
こういう地道な努力が、最終的なクオリティに関わってくるのだと思います。