perlinNoise (3)
2008/02/03 20:07 - AS3.0
前回のサンプルでは、onEnterFrame 時、offset 配列に格納された複数の Point オブジェクトの x座標、もしくは y座標はすべて同じ値が加算されていました。
（例1）
offset[0].x += 2; offset[0].y += (-3);
offset[1].x += 2; offset[1].y += (-3);
offset[2].x += 2; offset[2].y += (-3);
……
こんな感じですね。
今回のサンプルでは、各 Point オブジェクトの両座標に加算する値が、同じ値じゃなくなるようにします。これも先人の教えによる公式によるものです。
手順としてはまず、onEnterFrame の前におこなう offsets 生成の段階でもうひとつの配列を生成します。このサンプルでは offxy としました。offxy は二次元配列です。
for ( var i:int=0; i<octaves; i++ ) {
offset[i] = new Point( Math.random()*w , Math.random()*h );
offxy[i] = new Array(2);
offxy[i][0] = Math.random()*dist - dist*0.5;
offxy[i][1] = Math.random()*dist - dist*0.5;
}
dist はあまり大きな数値にすると、模様の動きがとんでもないことになるので、このサンプルでは 6 にしました。
そうすると、offxy の各要素には 3 ～ -3 の値のいずれかが入ることになります。
（例2）
offxy = [ [2,-3] , [0,1] , [-1,-3] , ……… ];
こんな感じですね。
そして onEnterFrame 時に以下のように処理します。
for ( var i:int=0; i<octaves; i++ ) {
offset[i].x += offxy[i][0];
offset[i].y += offxy[i][1];
}
（例2）の値を使うと、onEnterFrame 時におこなわれる処理は以下のようになります。
（例3）
offset[0].x += 2 ; offset[0].y += (-3);
offset[1].x += 0 ; offset[1].y += 1 ;
offset[2].x += (-1); offset[2].y += (-3);
……
するとどうなるのか。それが下のサンプルです。
領域をクリックすると開始します。再びクリックすると停止します。領域クリックで開始停止トグル。
おお。冷凍室の中で白く凝結した空気というか、箱の中に立ちこめる煙というか、なんかかなりゆらいで見えますよ。
前回の巻物を動かしているような感じとはえらく違って、なんだかとってもカオスっぽい動きでキモチイイですね。ヤプールが出てきそうですね。
これを仮に「ゆらぎ」と名付けましょう。
ところで上のサンプルでは offset 配列の特定要素の特定座標に着目すると、どのタイミングの onEnterFrame でも、同じ値が加算されています。
（例3）でいうと、offset[1].y はどの onEnterFrame でも 1が加算され、offset[0].x は 2が加算され続ける。
何回 onEnterFrame を繰り返しても、各 onEnterFrame 時に加算される値は不変です。
ではその値を不変じゃなくするとどうなるのか。
onEnterFrame 時にランダムな値が加算されるように改造してみます。
for ( var i:int=0; i<octaves; i++ ) {
offset[i].x += ( Math.random()*dist - dist*0.5 );
offset[i].y += ( Math.random()*dist - dist*0.5 );
}
その結果が下のサンプルです。
今度は打って変わって、人の不安感を煽り立てるといいますか、何か不吉な感じの動きをしますね。「妄想代理人」アイキャッチみたいですね。
名付けるならばこっちはさしずめ「ふるえ」とでもなりますか。
シリーズ
