仕組みとパラメータ

taichino — Wed, 19 Aug 2009 20:12:29 +0000

Flash Math Creativityという本が元ネタです。

以下のswfを見て下さい。円が次々と迫ってくる単純なプログラムです。これはこれで面白いわけなんですが、続きがあります。

円を作成して、フレームベースで振動や拡大しつつ、フェードアウトさせるという単純なものですが、ソースコード中の「以下パラメータ群」に注目して下さい。幾つかのパラメータがあります。振れ幅や、拡大率等、各々は簡単なパラメータなのですが、これを組み合わせて変更すると、思ったよりもダイナミックに挙動が変化します。

package {
    import flash.display.*;
    import flash.events.*;
    import flash.geom.*;
 
    [SWF(width="500", height="400", backgroundColor="#FFFFFF", frameRate="15")]
    public class FrameTest extends Sprite {
        public function w() : Number { return 500; }
        public function h() : Number { return 400; }
 
        function FrameTest() {
            addEventListener(Event.ENTER_FRAME, mainLoop);
        }
        public function mainLoop(evt:Event) : void {
            if (Math.random() * 100 < frequency()) {
                var circle:MovieClip = new MovieClip();
                circle.graphics.beginFill(0xFFFFFF);
                circle.graphics.drawCircle(0, 0, 21);
                circle.rad = 0;
                circle.radiusX = radiusX();
                circle.radiusY = radiusY();
                circle.x = w() / 2;
                circle.y = h() / 2;
                circle.transform.colorTransform = color();
                addChild(circle);
                circle.addEventListener(Event.ENTER_FRAME, onEnterFrame);
            }
        }
 
        public function onEnterFrame(evt:Event) : void {
            var target:MovieClip = MovieClip(evt.target);
            target.rad += angleRate();
            target.radiusX += radiusDX();
            target.radiusY += radiusDY();
            target.x = w() / 2 + target.radiusX * Math.sin(target.rad * Math.PI / 180);
            target.y = h() / 2 + target.radiusY * Math.cos(target.rad * Math.PI / 180);
            target.scaleX = target.scaleY *= scaleRate();
 
            target.alpha *= fade();
            if (target.alpha < 0.03) {
                target.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
                removeChild(target);
            }
        }
 
        //
        // 以下パラメータ群
        //
 
        public function fade() : Number {
            return 0.95;
        }
        public function color() : ColorTransform {
            return new ColorTransform(1, 0.5, 0, 1, 0, 0, 0);
        }
        public function frequency() : Number {
            return 20;
        }
        public function scaleRate() : Number {
            return 1.05;
        }
        public function radiusX() : Number {
            return 0;
        }
        public function radiusY() : Number {
            return 0;
        }
        public function radiusDX() : Number {
            return 1;
        }
        public function radiusDY() : Number {
            return 1;
        }
        public function angleRate() : Number {
            return 30;
        }
    }
}

パラメータを変更して、例えば少しランダム性を持たせると以下のような挙動になります。プログラムの構造は同じなのに、ここまで変化があるのが面白くてエントリにしてみました。ソースコードはあえて載せませんので、色々弄ってみると面白い発見があると思いますYO！(しつこいですが、以下のswfは上記ソースコードからパラメータのみ変更しています。)

関数でもフレームワークでも、プログラムは上手く仕組みを作ると、後はパラメータを少し弄るだけで色んな挙動を実現する事が出来るようになりますね。最近漸く抽象化の面白さが解ってきたような気がします。あとやっぱ数学って出来るにこした事はないですね。これはsin,cosしか使ってないですけど。

taichino.com » animation

仕組みとパラメータ