雪を降らせてみました。

http://space.geocities.jp/srand4000/snow01.html

　どうしても動かなくて困っていたんですが、驚いたことにおいらのブラウザだとデフォルトでglobalCompositeOperationの値が"source-over゛になっていないらしくて、明示的に書き込んだら急に動いた。ううむ、ややこしい。

http://space.geocities.jp/srand4000/snow02.html

　んで、画面を小さくして微調整。おいらのマシンだと画面の横幅が1024もあるので動きが鈍い。小さい画面なら高速で動くので大量の雪でも滑らかに動いてくれる。

　立体感も出るね。

　立体感ってことで上から下を覗いたような感じのもこさえてみた。↓

http://space.geocities.jp/srand4000/snow03.html

　最初に若干塊になって落ちるんだけど、微妙だな。もう少し工夫した方がいいかな。欲しい人がいたら改造するけど。　とりあえず塊感は取ってみた。多少違和感もあるけど、実用的には充分かな。↑


　あと上を見上げたのもこさえてみた。↓

http://space.geocities.jp/srand4000/snow04.html

　実は1/307200の確率で動作がおかしくなるはずなんだけど、まあ大丈夫。別にブラウザが落ちたりするバグではないので。気になるようなら修正するけど。

　宇宙空間を飛んでる風にも見える。色をつけても面白いかな。

http://space.geocities.jp/srand4000/snow05.html

　物凄く寒いところの雪の粒というのは、結晶の形が明確なためにプリズムのように七色に輝くんだそうです。

　そういえば日テレの「目が点。」の受け売りなんだけど、女性の視細胞は男と違うらしいので、見ているもの自体が全く違うんだそうです。

　あ、それからarc()関数の前にbeginPath()関数をつけておかないと、場合によってとんでもない動作になることがありますね。複数の円がつながって塗り潰されてしまうみたいです。

　これはこれで抽象絵画みたくてかわいいんだけど、意図した動作とは違うので。

　この挙動をみる限り、どうもパスが交差すると塗り潰しが適用されなくなるみたい。何かに使えそう。でもブラウザによって違うのかも知れないしな。


http://space.geocities.jp/srand4000/snow05b.html

　あんまりややこしい動作を書き込むと重くなっちゃうし。バナーくらいには使えるかな。

　あれこれいじってみたんだけど、どうもパーティクル自体の大きさが動作速度に最も影響するみたい。アルゴリズム自体はもっと複雑なものでもパーティクルが小さければサクサク動いているサンプルはいっぱいある。

http://space.geocities.jp/srand4000/snow06.html

　これ↑は重い。パーティクルは大きいんだけど、濃度が薄いので地味。濃度が薄いとディザリングがかかるみたいで、ブラウザにも依るんだろうけど計算量が地味に増えるみたい。

　背景に画像をはめ込むには

var image=new Image();
image.src='gazou.png';

image.onload=function(){

setInterval(main,33);

}

//-------------
context.drowImage(image,x,y);

みたいな感じに書くみたい。一般的にCanvasアニメの場合はHTML＜BODY＞タグの中のOnLoadとかで初期化関数を呼んで、その中でsetInterval()の第一引数にアニメ動作を書き込むんだけど、画像を読み込む場合には別に

image.onload=function(){setInterval(main,33)}

みたいに書くのが商用ページでの作法らしいです。

http://space.geocities.jp/srand4000/snow02bgpict.html

　このサンプル↑はそういうのやってないので、再読み込みが必要かもです。

　んで、こっち↓の方は再読み込みが要らない（らしい）バージョンです。

http://space.geocities.jp/srand4000/snow02bgpit2.html

　おいらの東芝Androidブラウザだと再読み込み云々とか要らないのでよくわからない。ブラウザに依るんだと思う。




外見上のホームページはこちら