ベジェ曲線

ベジェ曲線

ベジェ曲線

解説

フランスの自動車メーカーであるルノーのPierre Bezier氏が考案した曲線。


4個の制御点によって描かれる3次のベジェ曲線がよく用いられる。

プログラムの例

定義にできるだけ忠実に表現したプログラムはこちら。

class Bitmap

  #--------------------------------------------------------------------------
  # ● ベジェ曲線描画
  #     p1(x1,y1), p4(x4,y4) : 端点
  #     p2(x2,y2), p3(x3,y3) : 方向点
  #     color                : 色
  #--------------------------------------------------------------------------
  def bezier_curve(x1, y1, x2, y2, x3, y3, x4, y4, color)
    # 0 < t < 1 の範囲で繰り返し
    0.step(1, 0.001){ |t|
      # p1, p2 を t : 1-t に分割する点をp5とする
      x5 = x1 + (x2 - x1) * t
      y5 = y1 + (y2 - y1) * t
      # p2, p3 を t : 1-t に分割する点をp6とする
      x6 = x2 + (x3 - x2) * t
      y6 = y2 + (y3 - y2) * t
      # p3, p4 を t : 1-t に分割する点をp7とする
      x7 = x3 + (x4 - x3) * t
      y7 = y3 + (y4 - y3) * t
      # p5, p6 を t : 1-t に分割する点をp8とする
      x8 = x5 + (x6 - x5) * t
      y8 = y5 + (y6 - y5) * t
      # p6, p7 を t : 1-t に分割する点をp9とする
      x9 = x6 + (x7 - x6) * t
      y9 = y6 + (y7 - y6) * t
      # p8, p9 を t : 1-t に分割する点をp10とする
      # この点がベジェ曲線上の点となる
      x10 = x8 + (x9 - x8) * t
      y10 = y8 + (y9 - y8) * t
      # 点の描画
      set_pixel(x10, y10, color)
    }
  end
end

また、この曲線を媒介変数表示すると、

x = (1-t)^3 x_1  +  3(1-t)^2 tx_2  +  3(1-t)t^2 x_3  +  t^3 x_4

y = (1-t)^3 y_1  +  3(1-t)^2 ty_2  +  3(1-t)t^2 y_3  +  t^3 y_4

となるため、これを利用するとはるかに簡潔で、高速なプログラムになる。

class Bitmap

  #--------------------------------------------------------------------------
  # ● ベジェ曲線描画
  #     x1,y1,x4,y4 : 端点
  #     x2,y2,x3,y3 : 方向点
  #     color           : 色
  #--------------------------------------------------------------------------
  def bezier_curve(x1, y1, x2, y2, x3, y3, x4, y4, color)
    # 0 < t < 1 の範囲で繰り返し
    0.step(1, 0.001){ |t|
      _t = 1 - t
      a = _t**3
      b = 3*(_t**2)*t
      c = 3*_t*(t**2)
      d = t**3
      x = a*x1 + b*x2 + c*x3 + d*x4
      y = a*y1 + b*y2 + c*y3 + d*y4
      set_pixel(x, y, color)
    }
  end
end

* はてなダイアリーキーワード:ベジェ曲線