be-style サンプルページ

マウスに沿って描かれる五線譜（AS3.0）

マウスの軌跡に五線譜を描くというものを作ってみました。

内容は非常にシンプルなのですが、見た目が気にっています。
フィルタをかけたりすれば綺麗だろうなぁと思いつつ、基本が出来たところでアップです。

メモ．

graphics.curveTo() を使った曲線の描画に工夫があります。
連続で滑らかな曲線を描画するときは、この方法が望ましいみたいです。

使用ライブラリ．

なし

ソースコード．

package {
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.geom.Point;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    import flash.display.Bitmap;
    import flash.display.BitmapData;

    public class Gosenfu extends MovieClip {
        //プロパティ宣言
        private var _ppt:Array = [];
        private var _timer:Timer;

        //___________________________________________________________
        //■コンストラクタ
        function Gosenfu() {
            for (var i:Number = 0; i < 30; ++i) _ppt.push(new Point());
            
            //タイマー処理
            _timer = new Timer(16);
            _timer.addEventListener(TimerEvent.TIMER, onTimer);
            _timer.start();
        }

        //___________________________________________________________
        //■タイマー処理
        private function onTimer(event:TimerEvent):void {
            for (var i:int = 0; i < _ppt.length; ++i) {
                if (i == 0) {
                    _ppt[i].x = this.mouseX;
                    _ppt[i].y = this.mouseY;
                }
                else {
                    _ppt[i].x += (_ppt[i-1].x - _ppt[i].x)/2;
                    _ppt[i].y += (_ppt[i-1].y - _ppt[i].y)/2;
                }
            }
            this.graphics.clear();
            drawCurve(_ppt, this,2,0xFF6666);
            drawCurve(_ppt, this,2,0xFF00FF,8);
            drawCurve(_ppt, this,2,0xFFFF00,16);
            drawCurve(_ppt, this,2,0x00FFFF,24);
            drawCurve(_ppt, this,2,0x0000FF,32);
            drawCurve(_ppt, this,2,0x000000,40);
        }

        //___________________________________________________________
        //■カーブ描画
        private function drawCurve(pt:Array, sp:Sprite, bold:int, color:uint, distance:int=0):void {
            sp.graphics.lineStyle(bold,color);
            if (pt.length>=3) {
                sp.graphics.moveTo(pt[0].x, pt[0].y);
                for (var i:int=1; i <= pt.length-3; ++i) {
                    sp.graphics.curveTo( pt[i].x, pt[i].y+distance,
                    (pt[i].x+pt[i+1].x)/2,(pt[i].y+pt[i+1].y)/2+distance);
                }
                sp.graphics.curveTo(pt[pt.length-2].x, pt[pt.length-2].y, pt[pt.length-1].x, pt[pt.length-1].y);
                sp.graphics.endFill();
            }
        }
    }
}

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。