雪を降らせるみたいな、ゆらゆらと落下するアルゴリズムを！

締切済

質問者：_pipi_
質問日時：2008/12/14 16:13
回答数：2件

個人的なページに雪を降らせたいのですが、左右に滑らかにゆれる
アルゴリズムには、どんなものがあるのでしょう？
雪を多めに降らせたいと思っているので速度も重要です
自分が思いつくものとしては、sin関数です。しかし速度が・・・

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： Gizensha
回答日時：2008/12/15 23:08

# コードは詳しく読んでません。

ずばりのコードを書く気もありません。あくまで考え方のみです。あしからず。

Nフレーム後の雪の座標をあらかじめテーブルに持っておくのも一つの手ですね。
この場合全部が同じ動きになってしまうとつまらないので、適度に乱数で揺らぎを与えてみることになるかと思います。

この回答への補足

「乱数で揺らぎ」を考えてました。
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>

補足日時：2008/12/16 13:39

通報する

- 0
- 件

通報する

No.1

回答者： Gizensha
回答日時：2008/12/14 21:18

関数のオーバーヘッドのみが問題なら、あらかじめ配列に用意してしまうのも一つの手ですよ。

昔は速度を稼ぐために128倍整数化したサインテーブルをxsin[0..359]のような配列に確保するなどしたものです。

この回答への補足

こんな感じでしょうか？
<!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>