Вывод формул Безье

Порой полезно знать формулы, по которым графическая система рассчитывает визуализацию кривых. Например, это может понадобиться, чтобы расположить другие графические элементы (скажем, символы текста) в соответствии с нарисованной системой кривой. Кроме того, вывод формул для расчета кривых — неплохое упражнение (не с Луны же они берутся!).

Кривая Безье — это полином третьего порядка. Как и все полиномы третьего порядка, кривая Безье уникально определяется четырьмя точками. Мы обозначили эти точки p₀ (начальная), p₁, p₂ (две управляющие) и p₃ (конечная). Их можно обозначить и так: (x₀, y₀), (x₁, y₁), (x₂, y₂) и (x₃, y₃).

Полином третьего порядка, задающий координаты точек в двумерном пространстве, можно записать в форме параметрических уравнений общего вида:

x(t) = a_x · t³ + b_x · t² + c_x · t + d_x

y(t) = a_y · t³ + b_y · t² + c_y · t + d_y

где a_x, b_x, c_x, d_x, a_y, b_y, c_y и d_y — константы, a t меняется от 0 до 1. Любая кривая Безье уникально определяется этими 8 константами. Их значения зависят от координат четырех точек, задающих кривую. Цель этого упражнения — вывести уравнения для расчета восьми констант по заданным координатам четырех точек.

Наше первое допущение для вывода этих уравнений в том, что кривая Безье начинается в точке с координатами (x₀, y₀) при t = 0:

x(0) = x₀

y(0) = y₀

Даже такое простое допущение позволяет продвинуться в выводе уравнений для констант. Подставив в параметрические уравнения t = 0 получим:

x(0) = d_x

y(0) = d_y

Это означает, что две из констант — это просто координаты начальной точки:

d_x = x₀     (1a)

d_y = y₀     (1b)

Второе допущение, касающееся кривой Безье: она заканчивается в точке с координатами (x₃, y₃) при t = 1:

x(1) = x₃

y(1) = y₃

Подставив в параметрические уравнения 1 вместо t, получаем:

x(1) = a_x + b_x + c_x + d_x

y(1) = a_y + b_y + c_y + d_y

что означает наличие следующей связи между константами и координатами конечной точки:

a_x + b_x + c_x + d_x = x₃     (2a)

a_y + b_y + c_y + d_y = y₃     (2b)

Остальные допущения касаются первых производных параметрических уравнений, описывающих угол наклона кривой. Первую производную параметрического уравнения общего вида, задающего полином третьего порядка как функцию переменной t, можно записать так:

x'(t) = 3a_x · t² + 2b_x · t + c_x

y'(t) = 3a_y · t² + 2b_y · t + c_y

Нас, в частности, интересует угол наклона кривой в конечных точках. Как известно, прямая, проведенная из начальной точки через первую управляющую точку, проходит по касательной к кривой Безье и направлена в ту же сторону, что и кривая. Обычно эту прямую задают параметрическими уравнениями:

x(t) = (x₁ – x₀) t + x₀

y(t) = (y₁ – y₀) t + y₀

где t изменяется от 0 до 1. Но можно задать ее и иначе:

x(t) = 3(x₁ – x₀) t + x₀

y(t) = 3(y₁ – y₀) t + y₀

где t изменяется от 0 до 1/3. Почему именно 1/3? Дело в том, что длина той части кривой Безье, по касательной к которой проходит прямая, проведенная из точки p₀ через p₁ направленная в ту же сторону, что и кривая, равна примерно 1/3 от общей длины кривой. Первые производные модифицированных параметрических уравнений можно записать так:

x'(t) = 3(x₁ – x₀)

y'(t) = 3(y₁ – y₀)

Если нужно рассчитать по этим уравнениям угол наклона кривой Безье при t = 0, то:

x'(0) = 3(x₁ – x₀)

y'(0) = 3(y₁ – y₀)

Подставив t = 0 в уравнение первой производной полинома третьего порядка, получим:

x'(0) = c_x

y'(0) = c_y

Это позволяет записать равенство:

c_x = 3(x₁ – x₀)     (3a)

c_y = 3(y₁ – y₀)     (3b)

Последнее допущение таково: прямая, проведенная из второй управляющей точки через конечную, является касательной к кривой Безье в ее конечной точке и направлена в ту же сторону, что и кривая. Иначе говоря:

x'(1) = 3(x₃ – x₂)

y'(1) = 3(y₃ – y₂)

Из уравнений общего вида следует, что:

x'(1) = 3a_x + 2b_x + c_x

y'(1) = 3a_y + 2b_y + c_y

поэтому:

3a_x + 2b_x + c_x = 3(x₃ – x₂)     (4a)

3a_y + 2b_y + c_y = 3(y₃ – y₂)     (4b)

Выражения 1а, 2а, 3а и 4а дают четыре уравнения с четырьмя неизвестными, которые можно решить относительно a_x, b_x, c_x и d_x, выразив их через x₀, x₁, x₂ и x₃. Выполнив ряд алгебраических преобразований, получаем:

a_x = –x₀ + 3x₁ – 3x₂ + x₃

b_x = 3x₀ – 6x₁ + 3x₂

c_x = 3x₀ + 3x₁

d_x = x₀

Уравнения 1b, 2b, 3b и 4b позволяют сделать то же самое для коэффициентов y. После этого можно подставить константы обратно в параметрическое уравнение общего вида для полинома третьего порядка:

x(t) = (–x₀ + 3x₁ – 3x₂ + x₃) · t³ + (3x₀ – 6x₁ + 3x₂) · t² + (3x₀ + 3x₁) · t + x₀

y(t) = (–y₀ + 3y₁ – 3y₂ + y₃) · t³ + (3y₀ – 6y₁ + 3y₂) · t² + (3y₀ + 3y₁) · t + y₀

В сущности, на этом можно было бы закончить. Но лучше раскрыть скобки и привести подобные слагаемые. В итоге получатся более элегантные параметрические уравнения, с которыми проще работать:

x(t) = (1 – t)³ · x₀ + 3t(1 – t)² · x₁ + 3t²(1 – t) · x₂ + t³ · x₃

y(t) = (1 – t)³ · y₀ + 3t(1 – t)² · y₁ + 3t²(1 – t) · y₂ + t³ · y₃

Такими уравнениями обычно задают кривые Безье.

В следующей программе класс BezierManual переопределяет класс Bezier из программы Bezier, показанной выше, и рисует вторую кривую Безье. Но на этот раз кривая рассчитывается «вручную» при помощи параметрических уравнений, которые мы только что вывели.

  //---------------------------------------------
  // BezierManual.cs (C) 2001 by Charles Petzold
  //---------------------------------------------
  using System;
  using System.Drawing;
  using System.Windows.Forms;

  class BezierManual: Bezier
  {
      public new static void Main()
      {
          Application.Run(new BezierManual());
      }
      public BezierManual()
      {
          Text = "Bezier Curve \"Manually\" Drawn";
      }
      protected override void OnPaint(PaintEventArgs pea)
      {
          base.OnPaint(pea);

          BezierSpline(pea.Graphics, Pens.Red, apt);
      }
      void BezierSpline(Graphics grfx, Pen pen, Point[] aptDefine)
      {
          Point[] apt = new Point[100];

          for (int i = 0; i < apt.Length; i++)
          {
              float t = (float) i / (apt.Length - 1);

              float x = (1 - t) * (1 - t) * (1 - t) * aptDefine[0].X +
                         3 * t  * (1 - t) * (1 - t) * aptDefine[1].X +
                         3 * t * t        * (1 - t) * aptDefine[2].X +
                         t * t * t                  * aptDefine[3].X;

              float y = (1 - t) * (1 - t) * (1 - t) * aptDefine[0].Y +
                         3 * t  * (1 - t) * (1 - t) * aptDefine[1].Y +
                         3 * t * t        * (1 - t) * aptDefine[2].Y +
                         t * t * t                  * aptDefine[3].Y;

              apt[i] = new Point((int) Math.Round(x), (int) Math.Round(y));
          }
          grfx.DrawLines(pen, apt);
      }
  }

Метод OnPaint в программе BezierManual вызывает одноименный метод из базового класса (которым является класс Bezier), а затем — метод BezierSpline из своего класса. Определение метода BezierSpline не отличается от DrawBeziers за исключением использования объекта Graphics в качестве первого аргумента и возможности обработки лишь одной кривой Безье. Этот метод задействует массив из 100 структур Point, каждая из которых рассчитывается на основе полученных выше параметрических уравнений, после чего рисует кривую как составную линию. Программа рисует кривую Безье, рассчитанную «вручную», красным цветом, что позволяет сравнить ее с аналогичной кривой, нарисованной Windows Forms. Кривые, конечно, отличаются, но не более чем на 1 пиксел.