むにょむにょ(Light Worms)


むにょむにょ動く様子を眺めるだけで、インタラクションはありません・・・
動きのロジックには、マッピング用の画像のピクセルから色情報を読み取り、読み取った色情報から複数ビットの情報を取り出して動く方向や速さを決めていく「フォースマップ」という手法を使っています。
ちなみにこのコンテンツではマッピング画像としてBitmapDataにperlinNoiseを生成して使用しています。

むにょむにょ(Light Worms) – wonderfl build flash online

以下はキモとなる部分の簡単なコード解説です。
詳しくはwonderflでコードを参照してください。

パーリンノイズを生成して…

//_mapData(BitmapData)にパーリンノイズをかける
_mapData.perlinNoise( 115, 115, 10, Math.random() * 0xFFFFFF | 0, false, true, 1 | 2);

生成したパーリンノイズの色情報に基づいて動きを作ります

while (i < _vecList.length){
	var posX:Number;
	var posY:Number;
	var dots:Vec = _vecList[i];
	var col:Number = _mapData.getPixel(dots.pv.x, dots.pv.y); // ピクセルから色情報を読み取り
	var r:uint = col >> 16 & 0xff; // Rの色情報
	var g:uint = col >> 8 & 0xff; // Gの色情報
	var b:uint = col & 0xff; // Bの色情報

	// 今回はRの色情報をX軸方向、Gの色情報をY軸の加速度パラメータとして利用
	dots.av.x += ( r - 128 ) * .0002;
	dots.av.y += ( g - 128 ) * .0002;

	// あとは速度に加速度をプラスしてさらに現在の位置にプラスし動かし
	dots.vv.x += dots.av.x;
	dots.vv.y += dots.av.y;
	dots.pv.x += dots.vv.x;
	dots.pv.y += dots.vv.y;

	// 最後に摩擦係数で速度を減速させます
	dots.av.x *= .97;
	dots.av.y *= .97;
	dots.vv.x *= .93;
	dots.vv.y *= .93;
	//
	posX = dots.pv.x;
	posY = dots.pv.y;
	//
	_bmd.copyPixels(_circleBmd, _circleBmd.rect, new Point(dots.pv.x, dots.pv.y));
	i++;
}