スポンサーサイト

しみが広がるような描画

ステージ上でマウスボタンを押すと、押してる間ジワジワっと液体が広がるようなカンジになります。

シミの描画は、塗りつぶしで曲線で閉じた図形を描いてるダケです。マウスボタンを押してる間はその図形がだんだんデカクなるという寸法デス。

曲線の描画方法は、座標の配列を作っといてソイツラをコントロールポイントに、配列上で並びあった座標の中点をアンカーポイントにしてGraphics#curveToを実行しています。Foundation Actionscript 3.0 Animation:Making Things Move!に書いてあったテクニックです。

そんで、じゃあ座標の配列はどうやって作ってんのかってーと、ボタンを押した時点でマウスカーソルの座標を保持するオブジェクトをいくつか作ります（サンプルでは２０個）。で、ボタンを押してる間は、ソイツラが放射状に離れてくようにしてます。ソレゾレの座標の離れてく距離は、座標ごと／フレームごとにランダムです。

今回のサンプルでは特にクラスは作ってなくて、全部フレームアクションで書いてます。こんなカンジです。

// 点の数
var pointCnt:uint = 20;
// 染みが広がる速度
var speed:Number = 5;
// 描画中の染み
var stain:Sprite;
// 描画中の染みの色
var stainColor:uint;
// 描画中の染みの情報
var infoArray:Array = new Array();
// マウスボタン
stage.addEventListener(MouseEvent.MOUSE_DOWN, doMouseDown);
function doMouseDown(e:MouseEvent):void {
  // 染みを描画するスプライトを生成
  stain = new Sprite();
  stain.x = mouseX;
  stain.y = mouseY;
  stain.filters = [new BlurFilter()];
  addChild(stain);
  // 染み描画情報の生成
  infoArray = new Array();
  var dAngle:Number = 2 * Math.PI / pointCnt;
  for (var i:uint = 0; i < pointCnt; i++) {
    var info:Object = {x:0, y:0, r:0, angle:dAngle * i};
    infoArray.push(info);
  }
  // 染みの色設定
  stainColor = Math.random() * 0xFFFFFF;
  // フレームイベントリスナの登録
  stain.addEventListener(Event.ENTER_FRAME, doStainEnterFrame);
}
stage.addEventListener(MouseEvent.MOUSE_UP, doMouseUp);
function doMouseUp(e:MouseEvent): void {
  // フレームイベントリスナの解除
  stain.removeEventListener(Event.ENTER_FRAME, doStainEnterFrame);
}
// フレームイベント
function doStainEnterFrame(e:Event):void {
  // 染みを広げる
  for (var i:uint = 0; i < pointCnt; i++) {
    var info:Object = infoArray[i];
    info.r += Math.random() * speed;
    info.x = Math.cos(info.angle) * info.r;
    info.y = Math.sin(info.angle) * info.r;
  }
  // 閉じた曲線の描画
  var g:Graphics = stain.graphics;
  g.beginFill(stainColor);
  var info1:Object = infoArray[infoArray.length - 1];
  var info2:Object = infoArray[0];
  g.moveTo((info1.x + info2.x) / 2, (info1.y + info2.y) / 2);
  for (i = 1; i < pointCnt; i++) {
    info1 = info2;
    info2 = infoArray[i];
    g.curveTo(info1.x, info1.y, (info1.x + info2.x) / 2, (info1.y + info2.y) / 2);
  }
  info1 = info2;
  info2 = infoArray[0];
  g.curveTo(info1.x, info1.y, (info1.x + info2.x) / 2, (info1.y + info2.y) / 2);
}

最初に定義してるpointCntが、曲線のコントロールポイントの数デス。閉じた曲線を描くのでアンカーポイントも同数デス。

イベントハンドラは、MouseEvent#MOUSE_DOWNのdoMouseDownメソッド／MouseEvent#MOUSE_UPのdoMouseUpメソッド／Event#ENTER_FRAMEのdoStainEnterFrameメソッドの３つデス。

doMouseDownメソッドでは、マウスカーソルの位置にシミを描画する用のSpriteインスタンス（stain）を生成して、addChildしてます。それっぽくするためにstainにはBlurFilterをかけてます。そして、曲線を描画するための座標配列を作ってます。配列の要素はObjectインスタンスで、ｘ座標／ｙ座標／原点からの距離／進む角度をプロパティに持ってます。また、染みの色もここでMath#randomを使って決めてます。

ボタンを押してる間だけシミが広がるようにするためにdoMouseDownメソッドでdoStainEnterFrameメソッドをイベントリスナに登録してます。doMouseUpメソッドでコイツを解除してるので、ボタンを離すと広がるのが止まるという寸法デス。

doStainEnterFrameメソッドでは、角度プロパティと乱数を使って座標配列の座標を原点から遠ざけてます。そうやって更新した座標を使って、doMouseDownメソッドで作ったSpriteインスタンスのgraphicsに図形を描画してます。