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

Question

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

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

Answer 1

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

Answer 2

кубических сплайнов

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

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

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

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

Кусочно-полиномиальный

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

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

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

Форма линии

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

Answer 3

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

Answer 4

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