数式で規則性のある動き

円形が規則正しく動くことでいろんな表情をみせてくれる実験Flash。「おっ！おおっ！まじで！そーなん！ま、まさか！？」って感じ。プログラムでこういう驚きを持った動きが作れるのが数式アニメーションの楽しいところですね。

どういう規則性で動いているかの説明は、作者のこちらのページで解説されています。

一番大きい丸が3分で1周します。次に大きい丸がその1番大きい丸の倍のスピードで回ります。次に大きい丸は3倍のスピードで、次が4倍、5倍・・・と、そうやって全ての丸が回っています。 それぞれ丸のグラフィックは線上を通った時に単音を鳴らすように設定されています。

そんなシンプルな原理で動いているなんてクールやん！で、こういうのはパラメータをいじっていろんなバリエーションを見たくなるものですので作ってみました。

回転はこの記事を参考に、色相変化等は Sketchbook ライブラリを使わせてもらうことでサクッとできます。といっても音は実装していません。ドキュメントクラスに以下のようにコーディング：

package {
  import flash.display.Sprite;
  import flash.geom.Point;
  import flash.utils.Timer;
  import flash.events.TimerEvent;
  import sketchbook.display.SpriteHelper;
  import sketchbook.display.DynamicSprite;
  import sketchbook.colors.ColorSB;
  
  public class Circle extends Sprite {
    //軌跡の半径
    private var radius:Number = 250;
    //一番大きいボールの半径
    private var ballRadius:Number = 20;
    //一番小さいボールの半径
    private var ballMinRadius:Number = 3;
    //ボールの数
    private var ballNum:int = 50;
    //１フレームあたりのボールの移動量（ラジアンで指定）
    private var radian:Number = 0.005;
    //以下、ほぼ固定でOK
    private var centerX:Number = stage.stageWidth / 2;
    private var centerY:Number = stage.stageHeight / 2;
    private var balls:Array;
    public function Circle() {
      var ballDistance:Number = radius / ballNum;
      var ballSizeMultiplier:Number = (ballRadius - ballMinRadius) / ballNum;
      var colorMultiplier:Number = 360 / ballNum;
      balls = new Array();
      for (var i:int = 0; i < ballNum; i++) {
        var ball:Sprite = new Sprite();
        balls.push(ball);
        var ballHelper:SpriteHelper = new SpriteHelper(ball);
        //ボールの色設定
        var col = new ColorSB(0xFF0000);
        col.hue = (ballNum - i - 1) * colorMultiplier;
        //ボールを描画
        ballHelper.beginFill(col);
        ballHelper.drawCircle(0, 0, ballMinRadius + i * ballSizeMultiplier);
        ballHelper.endFill();
        addChild(ball);
        //ボールの初期位置
        ball.x = centerX + ballDistance * (i +1);
        ball.y = centerY;
      }
      var timer:Timer = new Timer(40);//25fpsをシミュレート
      timer.addEventListener(TimerEvent.TIMER, loop);
      timer.start();
      //補助線の描画。適宜コメントアウトするなりしてください。
      drawStartLine();
      drawGuideCircle();
    }
    
    private function loop(event:TimerEvent):void {
      //回転前のボールのx,y座標と回転軸のx,y座標、回転させたい角度から、回転後のx,y座標を求める
      //http://www.trick7.com/blog/2006/06/27-230619.php
      for (var i:int = 0; i < ballNum; i++) {
        var myRadian:Number = radian * (ballNum - i);
        var x:Number = balls[i].x - centerX;
        var y:Number = balls[i].y - centerY;
        var x1:Number = Math.cos(myRadian) * x - Math.sin(myRadian) * y;
        var y1:Number = Math.cos(myRadian) * y + Math.sin(myRadian) * x;
        balls[i].x = centerX + x1;
        balls[i].y = centerY + y1;
      }
    }
    
    /*
    補助線作成用メソッド
    */
    private function drawStartLine():void {
      var line:Sprite = new Sprite();
      line.graphics.lineStyle(2, 0xFFFFFF);
      line.graphics.moveTo(centerX, centerY);
      line.graphics.lineTo(centerX + radius, centerY);
      addChild(line);
    }
    private function drawGuideCircle():void {
      var guideCircle:Sprite = new Sprite();
      guideCircle.graphics.lineStyle(2, 0xFFFFFF);
      guideCircle.graphics.drawCircle(centerX, centerY, radius);
      addChild(guideCircle);
    }
  }
}

一応それらしく動いたのでパラメーターいじって遊んでいたら丸の位置がだんだんずれていくバグ発見。原因は僕の上のコードの loop 関数内。このアプローチは丸一つ一つに対して、直前の座標位置を元に次の場所への移動させています。が、小数点以下の座標がまるめられるのでじわじわずれていくのです。たぶん。

直そうと思ってヒントを求めて本家ページ見たら、右下らへんにAS2だけどソースが載ってました。あったんかいな。そこで萎えて放置。ダメな僕。

「あとでやる」