画像ぐるぐる

javascript

http://google-mania.net/archives/760

見やすく整形してみた。タイマをかけて、定期的(5ms)毎に位置を更新してる。
算数がよくワカランので、この位置計算がどうなってるのか理解できない。。悲しいなぁ。


x4,y4がふれの最大で、x5,y5で負値にならない(左or上の画面外に行かない)ようにしてるんだよね？
x1〜x3, y1〜y3の値はどうやって決めてる？
x1,y1が周期の係数？x2,y2が前の画像とのずれの係数？x3,y3が位相？
x3,y3って、表示にどう影響するのかよく理解できない。


誰かおせーて！

R=0;
x1=.1;
y1=.05;
x2=.25;
y2=.24;
x3=1.6;
y3=.24;
x4=300;
y4=200;
x5=300;
y5=200;
function A(){
	for( i = 0; i < document.images.length; i++ ) {//document.images : 表示しているページ中のimageオブジェクトの配列
		document.images[i].style.position = 'absolute'; 
		document.images[i].style.left     = Math.sin( R * x1 + i * x2 + x3 ) * x4 + x5;
		document.images[i].style.top      = Math.cos( R * y1 + i * y2 + y3 ) * y4 + y5;
	}
	R++
}
setInterval('A()',5 );
2007/12/31 updated

id:itaさんより回答もらいました。感謝。
http://q.hatena.ne.jp/1195584278#a780113

基本的に


sin(i * x2 + x3 ), cos(i * y2 + y3 )


をプロットしていますね。x2=y2ならば円あるいは楕円になりますが、ずれている場合左右と上下で


異なる振動数でゆれます。x2とy2の最小公倍数のiで元にもどります。x3, y3 はどの位置からスタートするかを決めていますが、長く時間が経過すれば元にもどるから、どこからスタートしても通る道筋は同じです。どこからスタートするかが違うだけです。