ビットマップ Bitmap

次は次は、ビットマップ。

ビットマップとは、

ビットマップ画像（びっとまっぷがぞう : bitmap image / bitmap graphics）とは、コンピュータグラフィックスにおける画像の形式のひとつ。画像を格子状に多くの細密な点（ピクセル、pixel）に分割し、その点の色や濃度をRGB等の表色系を用いて数値として表現する。

要は、画像をつぶつぶで表示するのだ、と覚えておく。
ASではビットマップを扱うためにBitmapクラスとBitmapDataクラスが用意されている。

同様のキーワードにベクターってのもある。
ベクターは拡大したり、縮小したりしてもキレイに表示される。
ビットマップは残念なかんじになる。

こう比較すると、あれー、ビットマップだめじゃん、って思うかもしんない。
でもビットマップによる描画はパフォーマンスが良いらしい。

それでは、サンプルを動かしてみます。
ペイントソフトとかでよくある、スプレーするようなやつです。
ドラッグするとスプレーできます。

コードはこんなかんじです。
onEnterFrameメソッドの中で描画しているんですけど、
ぱっと見、難しそうに見えます。
でも、よく見ると、一定の円の中にランダムでポイントを指定しているだけです。

BitmapData型の変数canvasに対してsetPixel32メソッドを呼び出して、
指したピクセルにカラーをセットしています。

package
{
  import flash.display.Bitmap;
  import flash.display.BitmapData;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.MouseEvent;
  import flash.filters.BlurFilter;
  
  public class SprayPaint extends Sprite
  {
    private var canvas:BitmapData;
    private var color:uint;
    
    private var size:Number = 20;
    private var density:Number = 300;
    
    public function SprayPaint()
    {
      init();
    }
    
    public function init():void{
      // 3つ目の引数は透明度。trueの場合　0xAARRGGBB
      canvas = new BitmapData(500, 500, true, 0xFFFFFFFF);
      
      // BitmapDataはDisplayObjectのサブクラスじゃないのでaddChildできないからラップする
      var bmp:Bitmap = new Bitmap(canvas);
      bmp.filters = [new BlurFilter(2, 2, 3)]
      addChild(bmp);
      
      stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown_stage);
      stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp_stage);
    }
 
    private function onMouseDown_stage(evt:MouseEvent):void
    {
      color = Math.random() * 0xffffff + 0xFF000000;
      addEventListener(Event.ENTER_FRAME, onEnterFrame);
    }
 
    private function onMouseUp_stage(evt:MouseEvent):void
    {
      removeEventListener(Event.ENTER_FRAME, onEnterFrame);
    }
 
    private function onEnterFrame(evt:Event):void
    {
      for(var i:int = 0; i < density; i++){
        // PI * RAD = 180
        // RAD(random) * PI * 2 <= 360
        var angle:Number = Math.random() * Math.PI * 2;
        var radius:Number = Math.random() * size;
        // 現在のカーソル位置にブレを出す
        var xpos:Number = mouseX + Math.cos(angle) * radius;
        var ypos:Number = mouseY + Math.sin(angle) * radius;
        
        // X,Yを指定してスプレー
        canvas.setPixel32(xpos, ypos, color);
      }      
    }
  }
}

また、BitmapDataクラスはDisplayObjectのサブクラスではないので、
そのままではaddChildできません。
そのため、Bitmapクラスでラップする必要があります。

おしまい。