- 締切済み
雪を降らせるみたいな、ゆらゆらと落下するアルゴリズムを！
個人的なページに雪を降らせたいのですが、左右に滑らかにゆれる アルゴリズムには、どんなものがあるのでしょう？ 雪を多めに降らせたいと思っているので速度も重要です 自分が思いつくものとしては、sin関数です。しかし速度が・・・
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- Gizensha
- ベストアンサー率34% (207/608)
# コードは詳しく読んでません。ずばりのコードを書く気もありません。あくまで考え方のみです。あしからず。 Nフレーム後の雪の座標をあらかじめテーブルに持っておくのも一つの手ですね。 この場合全部が同じ動きになってしまうとつまらないので、適度に乱数で揺らぎを与えてみることになるかと思います。
- Gizensha
- ベストアンサー率34% (207/608)
関数のオーバーヘッドのみが問題なら、あらかじめ配列に用意してしまうのも一つの手ですよ。 昔は速度を稼ぐために128倍整数化したサインテーブルをxsin[0..359]のような配列に確保するなどしたものです。
お礼
ご回答ありがとうございます。 雪の描くラインをアルファベットの「J]のようにしてみたいのです。 落ちては左右どちらかにカーブして、せり上がるまではいかなくても よいのですが、そこで落下速度が落ち、また下に落ちるような・・・
補足
こんな感じでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> body { background-color:black; overflow:hidden; } </style> <script type="text/javascript"> //@cc_on var i,snow =50; var sin =[]; for( i=0; i<361; i++) sin[i]=Math.sin(i*3.14159/180); for( i=0; i<snow; i++) new bringSnow(); function bringSnow(){ this.go = function(){ this.y += this.z ; if( this.y > document.documentElement.clientHeight-60) this.init(); this.e.style.top = this.y +'px'; this.e.style.left = (this.x + sin[this.y%360|0]*this.z*10) +'px'; } this.init = function(n){ this.p =0; this.y = Math.random() * document.documentElement.clientHeight * ( n != undefined ) |0; this.x = (Math.random() * document.documentElement.clientWidth |0)-60; this.z = (Math.random() * 5 |0) + 1; var op = (Math.random() * 80 |0) + 21; this.e.style.fontSize = this.z * 7 + 'px'; this.e.style./*@if(1) filter = 'alpha(opacity='+ op+ ')'; @else @*/ MozOpacity = this.e.style.opacity = op / 100;/*@end@*/ } var ne = document.createElement('div'); ne.appendChild( document.createTextNode( '*' ) ); ne.style.color = 'white'; ne.style.position = 'absolute'; this.e = document.body.appendChild( ne ); this.init(1); setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), (Math.random() * 30 |0) +16) } </script>
補足
「乱数で揺らぎ」を考えてました。 Y軸方向もステップ量を変化させることで、考えて リサージュー曲線を思い出しました まぁ～これで充分かな～と・・・。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> body{ background-color:black; overflow:hidden; } </style> <body> <script type="text/javascript"> //@cc_on var i,snow =30; var sin =[]; for( i=0; i<361; i++) sin[i]=Math.sin(i*3.14159/180); for( i=0; i<snow; i++) new bringSnow(); function bringSnow(){ this.go = function(){ this.y += this.z/2 +2; this.p+=2; if( this.y > document.documentElement.clientHeight-60) this.init(); this.e.style.top = this.y + (sin[this.p%360]*6*this.z|0) +'px'; this.e.style.left = this.x + (sin[this.p*2%360]*6*this.z|0) +'px'; } this.init = function(n){ this.p =0; this.y = Math.random() * document.documentElement.clientHeight * ( n != undefined ) |0; this.x = (Math.random() * document.documentElement.clientWidth |0)-60; this.z = (Math.random() * 5 |0) + 1; var op = (Math.random() * 80 |0) + 21; this.e.style.fontSize = this.z * 7 + 'px'; this.e.style./*@if(1) filter = 'alpha(opacity='+ op+ ')'; @else @*/ MozOpacity = this.e.style.opacity = op / 100;/*@end@*/ } var ne = document.createElement('div'); ne.appendChild( document.createTextNode( '*' ) ); ne.style.color = 'white'; ne.style.position = 'absolute'; this.e = document.body.appendChild( ne ); this.init(1); setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), (Math.random() * 30 |0) +16) } </script>