Как нарисовать плавный путь через точки вокруг круга

Это может быть математический вопрос ... У меня есть набор точек на круговой оси. Назовем окружность x и радиус точек y. Проблема двоякая:

  1. Мне нужна плавная линия по всем точкам. Предположим, это нормальный график x / y: я знаю точные координаты. Теперь, как мне создать плавный путь между всеми этими точками?
  2. Это не обычный график x / y. Это график a / r (угол / радиус). Думаю, решение из 1. можно применить, но где мне провести эту линию? (Я не уверен, что наличие графика A / R усложняет задачу.)

(Я хочу создать это на <canvas> с помощью Javascript. Я настроил кое-что для нетерпеливых: http://jsfiddle.net/rudiedirkx/5LfdP/1/)

Я ищу

гладкий линейный график

обернутый по кругу со сходящимися концами (таким образом, 0% = 350 и 100% = 350).

Кажется, что кубический Безье необходим для создания плавных путей между точками, но это все, что у меня есть. Я обычно использую эту функцию Безье.

Имею ли я смысл? Я не могу найти лучшего снимка. (Вероятно, потому что я понятия не имею, как это называется.)

Редактировать 1: Моя попытка нарисовать, как это будет выглядеть: http://www.sketchtoy.com/26800595 (забудьте про анимацию, вот как работает sketchtoy)

Изменить 2: я обновил свою демонстрацию скрипта используя quadraticCurveTo (), но этого недостаточно. Мне нужны кривые Безье и вдвое больше, чтобы кривая проходила ЧЕРЕЗ точки. Как в О сплайн-интерполяции, но, надеюсь, проще.


javascript canvas linegraph bezier
person Rudie    schedule 28.03.2013    source источник
comment
350 ... вы имели ввиду 360, как в градусах?   -  person ErikE    schedule 29.03.2013
comment
Нет, я имел ввиду 350 из графика. Может быть любым значением Y. Просто кривая замыкается по кругу.   -  person Rudie    schedule 29.03.2013
comment
Итак, 0% - 100% - это ось X, которая огибает круг, чтобы соединить концы, а ось Y - это длина цилиндра? Так вы действительно ищете трехмерную диаграмму? Будет ли цилиндр прозрачным или непрозрачным (и если да, то как пользователь повернет его, чтобы увидеть всю кривую)?   -  person ErikE    schedule 29.03.2013
comment
@Rudie: Можно ли создать макет изображения того, как вам нужно, чтобы оно отображалось на экране после того, как оно было обернуто вокруг круга? Будет ли конечный результат двухмерной или трехмерной (возможно, цилиндрической)? В любом случае, в зависимости от формы, вы можете создать 2D-график и наложить его на текстуру, чтобы немного упростить задачу.   -  person Matt Coughlin    schedule 29.03.2013
comment
Это очень 2D. Это одна большая кривая (состоящая из множества маленьких кривых) по окружности. Добавил ссылку в теле.   -  person Rudie    schedule 29.03.2013
comment
@Rudie: Я предполагаю, что рисование кривых Безье для точек на линейном графике ничем не отличается от рисования кривых Безье для точек с круговой оси, которые были сопоставлены с координатами x, y (вокруг начала координат). Я не думаю, что ориентация очков имеет значение. Допустим, вы взяли точки линейного графика, повернули их вокруг центра на 45 градусов, а затем нарисовали кривые Безье. Я думаю, что конечный результат будет таким же, как если бы вы нарисовали кривые Безье, а затем повернули визуализированные кривые вокруг центра на 45 градусов.   -  person Matt Coughlin    schedule 29.03.2013
comment
@Rudie: Изменил свой ответ на комментарий и добавил один из ваших комментариев к вопросу. Соответствующие функции пути холста: quadraticCurveTo (), bezierCurveTo (). LukeH упомянул, что найденный вами сайт О сплайн-интерполяции может быть более или менее простейшим вариантом. .   -  person Matt Coughlin    schedule 29.03.2013

Ответы (1)


arrow_upward
1
arrow_downward

Если у вас есть функциональное выражение для вашего графика, вы можете просто построить его, переведя свои координаты в полярные координаты с круговым смещением. Считая 'x' вашим углом (min_x - это угол "0", а max_x - угол "360", или для компьютеров "2π"), используя следующие сопоставления:

φ (the angle) = map x from interval (min_x,max_x) to interval (0,2π);
a (the amplitude) = map y from (min_y,max_y) to (0, max_distance);

Затем вы можете указать координаты x / y, которые вы хотите построить для своей функции:

nx = a * cos(φ);
ny = a * sin(φ);

А для построения графиков я настоятельно рекомендую создать таблицу поиска для ваших значений, чтобы вы могли обойтись без постоянного вычисления исходных значений x / y. Если у вас нет функции, а есть только набор точек, значит, у вас уже есть эта LUT.

После преобразования ваших LUT-координат x / y рисование красивой кривой через каждую из них, вероятно, является задачей для сплайна Катмулла-Рома, а не для кривой Безье, поскольку сплайны Катмулла-Рома проходят через каждую используемую точку, тогда как кривые Безье не проходят. t, они обходят все точки, кроме начальной и конечной, поэтому они не подходят для того, что вы хотите сделать.

person Mike 'Pomax' Kamermans    schedule 29.03.2013
comment
Понятия не имею, что это значит ... Есть ли у меня выражение функции? У меня есть только фиксированный набор значений X и Y. Разве мне не нужны кривые Безье? Как бы мне их по кругу компенсировать? Я не понимаю! - person Rudie; 29.03.2013
comment
Я отредактировал ответ, чтобы лучше отразить то, что применимо в вашем случае. - person Mike 'Pomax' Kamermans; 30.03.2013