mieki256's diary



2014/11/24(月) [n年前の日記]

#1 [dxruby][spriter] Cubic Bezierとやらを実験

Spriter の補間曲線は3種類から選べるのだけど。 Cubic 曲線って何だろうとググってみたら、おそらくは Cubic Bezier、3次ベジェ曲線と呼ばれるものらしい。

3次ベジェ曲線は4つの制御点を必要とするけれど、Spriter の補間曲線設定画面を見る限り、以下のような値になってる予感。 c1, c2 だけが保存ファイルに記録されてたのは、それ以外の値は固定値だったから、てなことらしい。

ということで、DXRuby を使って3次ベジェ曲線を描いて検証。
cubic_ss.png

# cubic-bezier test

require 'dxruby'

def draw_cubic_bezier(x1, y1, x2, y2, x3, y3, x4, y4, col0, col1)
  ox, oy = x1, y1
  0.step(1.0, 0.05) do |t|
    tp = 1.0 - t
    a = t ** 3
    b = 3 * (t ** 2) * tp
    c = 3 * t * (tp ** 2)
    d = tp ** 3
    x = a * x4 + b * x3 + c * x2 + d * x1
    y = a * y4 + b * y3 + c * y2 + d * y1
    Window.drawLine(ox, oy, x, y, col0, 10)
    Window.drawBoxFill(x-1, y-1, x+1, y+1, col1, 20)
    ox, oy = x, y
  end
end

fnt = Font.new(14)
Window.loop do
  break if Input.keyPush?(K_ESCAPE)

  x1, y1 = 0, 0
  x4, y4 = (Window.width - 1), (Window.height - 1)

  r0 = (Input.mousePosX.to_f / Window.width)
  r1 = (Input.mousePosY.to_f / Window.height)
  x2, y2 = (Window.width * 0.333), Window.height * r0
  x3, y3 = (Window.width * 0.666), Window.height * r1

  0.step(1.0, 0.05) do |t|
    x = t * Window.width
    Window.drawLine(x, 0, x, Window.height, [64, 64, 64])
  end

  Window.drawBoxFill(x2 -2, y2 -2, x2 +2, y2 +2, C_RED)
  Window.drawBoxFill(x3 -2, y3 -2, x3 +2, y3 +2, C_RED)

  draw_cubic_bezier(x1, y1, x2, y2, x3, y3, x4, y4, C_BLUE, C_GREEN)

  Window.drawFont(4, 4, sprintf("CPU %4d %", Window.getLoad), fnt)
end
マウスカーソルを動かすと、中間にある2つの制御点の位置が変わる。

_3次ベジェ曲線の数式 を参考にさせてもらいました。ありがたや。

x座標値と t の値がずれるのかなと思ったけれど、見た目は同じっぽい。ということは、t を与えてy値だけを得て、その値を補間用の割合として使えそうかなと。x座標値は使わないし、y1 = 0、y4 = 1 なので、式も少し簡単にできそう。

以上です。

過去ログ表示

Prev - 2014/11 - Next
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project