Нарисуйте красивую кривую Безье через случайные точки

Я использую javascript с RaphaelJS, чтобы нарисовать гладкую линию через случайные точки с выходом в SVG. Линия идет строго горизонтально, не возвращаясь назад по оси X. В настоящее время я использую кубические кривые Безье для рисования линии из одной точки в другую.

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

Ответ 1

Кривые Catmull-Rom хорошо работают для прохождения очков. http://schepers.cc/getting-to-the-point

Ответ 2

Кубические сплайны

Если вы хотите нарисовать линии через, то вам нужна интерполяция. Безье - это кубические кривые с контрольными узлами вне кривой, но кубический сплайн представляет собой набор кубических кривых через n точек с плавными изменениями от каждого к другому. Подробнее о математике см. В статье Wikipedia.

Чтобы построить кубический сплайн через множество точек, вы, к сожалению, должны выполнить итеративную процедуру; вы по существу делаете n-1 кубические кривые и согласовываете их параметры вместе, что дает вам n + 1 одновременных уравнений. Как только вы это сделаете, когда вы переместите точки, вы можете использовать свое предыдущее решение в качестве отправной точки.

Чтобы сделать это в Рафаэле, вам нужно сгенерировать кубический сплайн, а затем вычислить эквивалентные значения управления Bezier для каждого сегмента.

Есть куски javascript для вычисления кубических сплайнов для вас, например Кубические сплайны в JavaScript (через CoffeeScript).

Кусочный многочлен

Альтернативой кубическим сплайнам является подгонка кубического (или более высокого) полинома к каждому набору из нескольких точек; например кубический на каждые 4 точки, , включая перекрытия. Таким образом, точки 10-13 делают кубик для линии от 11 до 12. Это будет не так гладко, как кубический сплайн, но он должен быть намного ближе. Это очень похоже на кубический сплайн, но без решения уравнения для параметров кривой сделать все гладко.

Проблема с кусочно-полиномиальным состоит в том, что он использует невыложенные многочлены более высокого порядка, и вы можете получить большие перегибы и колебания, когда точки не лежат на полиномиальных линиях или когда точки близко друг к другу.

Чтобы нарисовать это в Рафаэле, вы, вероятно, лучше всего просто пробовали линию чаще и использовали прямые линии для ее рисования.

Форма линии

Одним из важных соображений является то, какую линию вы хотите нарисовать. Если вы просто хотите гладкую линию, сделайте кубический сплайн. Но если вы рисуете статистику или какую-то другую конкретную линию, вам может быть лучше смотреть на разложение gaussian или другие вещи: кубические сплайны - это кубические полиномы (ax ³ + bx ² + cx + d = 0), поэтому вы не можете очень хорошо аппроксимировать кривые синуса (аудио/сигналы) или гауссианы (сигналы/статистика) или экспоненты (кривые затухания, статистика длинного хвоста).

Ответ 3

Как насчет усреднения углов касательных в ваших точках? Это избавляет от "неприглядного сустава".

Ответ 4

Я рекомендую вам вытащить основы Фоли и Ван Дама из интерактивной компьютерной графики и взглянуть на форму Эрмита для параметрической кривой. Кривая Эрмита определяется двумя конечными точками (через которые проходит кривая) и двумя касательными векторами, контролирующими направление кривой, когда она проходит через эти точки. Он легко конвертируется в форму Безье с несколькими матричными умножениями, но преимущество заключается в следующем: для гладких соединений соседние участки кривой будут использовать точно такие же касательные в совпадающих точках, тогда как с Безье вы должны заставить три точки быть коллинеарными.