連続した曲線の描画。

前回に続いて、曲線のおさらい。
はっきりいって、あまり面白くない。でもがんばるよ。俺は。

前回は曲線を書くときにcurveToメソッドを使うことを覚えました。
curveToメソッドの引数には、中点と、終点の座標を渡す、というものでした。
そのとき注意するが中点の指定の仕方、と。

と、今日の課題は曲線を連続して表示したい場合の例。
まず、ありがちなミスをやってみる。

ランダムな点を9コ作って、順番にcurveToでつなげてみる、の例。

package
{
  import flash.display.Sprite;
  
  public class MultiCurves1 extends Sprite
  {
    private var numPoints:uint = 9;
    
    public function MultiCurves1()
    {
      init();  
    }
    
    private function init():void
    {
      var points:Array = new Array();
      
      for(var i:int = 0; i < numPoints; i++){
        points[i] = new Object();
        points[i].x = Math.random() * 200;
        points[i].y = Math.random() * 200;
      }
      
      graphics.lineStyle(1);
      graphics.moveTo(points[0], points[0]);
      
      for(i = 1; i < points.length - 1; i += 2){
        graphics.curveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
      
      }
    }
  }
}

結果はこんなかんじ。

なんか角ばってて、かっこよくない。
というか、これは連続した曲線というより、独立した曲線を複数つないだだけ。

もっとなめらかにつなげたい、こんなふうに表示するには、

あ、ブログに貼ると違いがわかりにくい。でも気にしない。

こんなふうに書く。

package
{
  import flash.display.Sprite;
  
  public class MultiCurves2 extends Sprite
  {
    private var numPoints:uint = 9;
    
    public function MultiCurves2()
    {
      init();  
    }
    
    private function init():void
    {
      var points:Array = new Array();
      
      for(var i:int = 0; i < numPoints; i++){
        points[i] = new Object();
        points[i].x = Math.random() * 200;
        points[i].y = Math.random() * 200;
      }
      
      graphics.lineStyle(1);
      graphics.moveTo(points[0], points[0]);
      
      for(i = 1; i < numPoints - 2; i ++){
        // 終点を (中点 + 終点) / 2とする
        var xc:Number = (points[i].x + points[i + 1].x) / 2
        var yc:Number = (points[i].y + points[i + 1].y) / 2
        graphics.curveTo(points[i].x, points[i].y, xc, yc);
      }
      
      // 最後の2点
      graphics.curveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
    }
  }
}