百匹目の猿スプレーで描く

スプレーで描く

スプレーを吹き付けて描画するようなカンジのサンプルです。マウスボタンを押してる間だけスプレーします。スプレーの色はそのたびに変わります。

画像はあらかじめ置いてあります。ActionScriptでは、透明なBitmapDataを用意してそこにsetPixel32メソッドを使って色をつけています。不透明なキャンバスにスプレーするならsetPixelでもイイと思いマス。

フレームアクションのソースはこんなカンジです。

// 飛沫の飛ぶ範囲係数
var size:Number = 5;
// 一回で飛ばす飛沫の数
var sprayCnt:Number = 60;
// 描画領域
var canvas:BitmapData = new BitmapData(stage.stageWidth,
                                                       stage.stageHeight,
                                                       true,
                                                       0x00000000);
var bmp:Bitmap = new Bitmap(canvas);
addChild(bmp);
// 色
var color:uint;
// 乱数ジェネレータ
var rndGene:GaussianRandom = new GaussianRandom();
// マウスボタンを押したときのイベントハンドラ
stage.addEventListener(MouseEvent.MOUSE_DOWN,
  function (e:Event) {
    // スプレーの色を決定
    color = Math.random() * 0x1000000 + 0xFF000000;
    // フレームイベントリスナを登録
    addEventListener(Event.ENTER_FRAME, doEnterFrame);
  });
// マウスボタンを離したときのイベントハンドラ
stage.addEventListener(MouseEvent.MOUSE_UP,
  function (e:Event) {
    // フレームイベントリスナを解除
    removeEventListener(Event.ENTER_FRAME, doEnterFrame);
  });
// フレームイベントハンドラ
function doEnterFrame(e:Event):void {
  // 描画領域をロック
  canvas.lock();
  // 決められた数だけ飛沫を描画
  for (var i:int = 0; i < sprayCnt; i++) {
    // 角度
    var angle:Number = Math.random() * Math.PI * 2;
    // 中心からの距離
    var radius:Number = rndGene.random() * size;
    // 描画
    canvas.setPixel32(mouseX + Math.cos(angle) * radius,
                             mouseY + Math.sin(angle) * radius,
                             color);
  }
  // 描画領域のロックを解除
  canvas.unlock();
}

canvasというBitmapDataがスプレーの描画領域デス。Bitmapオブジェクトにセットして、Bitmapオブジェクトをステージに入れてマス。

MouseEvent.MOUSE_DOWNでスプレーの色を乱数で決めてマス。0xFF000000を足してるのは不透明にするためデス。また、フレームイベントリスナとしてdoEnterFrameを登録しています。

MouseEvent.MOUSE_UPでは、MOUSE_DOWNで登録したイベントハンドラを外してマス。これでマウスボタンを押してる間だけdoEnterFrameが実行されます。

doEnterFrameでは、sprayCntで指定した数のピクセルを塗っています（同一座標に重なることがあるので、実際に色がつくピクセルはそれより少なくなることもあります）。角度とマウスカーソルの座標からの距離を乱数で求めて、その位置をMOUSE_DOWN時に求めた色で塗っています。

角度はMath#random()で求めているのですが、距離のほうはMath#random()ではイマイチだったので、別の乱数ジェネレータ（GaussianRandom）を作ってソイツから得た乱数を使っています（でも大差なかったカモ）。

距離を求めるのに使ってるGaussianRandomクラスのコードはこんなカンジです。

package {
  /**
   * 正規分布乱数ジェネレータ。
   */
  public class GaussianRandom {
    /** 次の値があるか？ */
    private var hasNext:Boolean = false;
    /** 次の値 */
    private var next:Number = 0;
    /**
     * 正規分布乱数を生成し、戻します。
     * @return 生成した乱数
     */
    public function random():Number {
      if (hasNext) {
        hasNext = false;
        return next;
      } else {
        do {
          var v1:Number = Math.random() * 2 - 1;
          var v2:Number = Math.random() * 2 - 1;
          var s:Number = v1 * v1 + v2 * v2;
        } while (s >= 1 || s == 0);
        var m:Number = Math.sqrt(-2 * Math.log(s) / s);
        hasNext = true;
        next = v2 * m;
        return v1 * m;
      }
      
    }
  }
}