Javascript: Рисуем с помощью кривых Безье

[dshster]

Пример выдаёт пустой экран. (FF, Chrome, Ubuntu). И как-то привычнее видеть исходники либо на jsfiddle, либо на github.

[Nikon_NLG]

Пример нормально отображается, Chrome, Ubuntu

[Halflling]

Каюсь, не проверил. Поправил.

[Lamaster]

Windows 7-64, Opera 12.12 — полёт нормальный.

[lutov]

Спасибо, надо будет попробовать.
Когда отделяешь дизайн как конструирование от живописи, это идет на пользу и первому и второму. Буду дизайнить программно.

[tagir_valeev]

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

[Idalgo]

C аффинными преобразованиями действительно просто. Даже алгоритм distort по четырем точкам нашел.
Но алгоритма нелинейного искажения (по типу как сделан warp или envelope distort в Иллюстраторе) не могу найти.
Может кто сталкивался?

[tagir_valeev]

Хм… А чем не устроила готовая функция Canvas context.bezierCurveTo? Или третьего порядка кажется мало? Обычно для практических целей хватает. Или просто захотелось всё руками сделать? По крайней мере, укажите в статье, что второй и третий порядок поддерживаются стандартом, а то ведь вас кто-нибудь почитает и будут использовать велосипеды.

[Halflling]

Не знал. Спасибо, добавлю. Интересно было с самой кривой разобраться.

[KoteSoft]

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

Позор таким преподавателям, которые не могут нормально объяснить тему и отбивают у студентов всякое желание учится! Или все же дело в студенте?

[Halflling]

Ну в итоге разобрался же. Даже статью вот написал.

[bur]

for (var t = 0; t < 1 + step; t += step) { if (t > 1) { t = 1; }

->

for (var t = 0; t <= 1; t += step) {

?

[Halflling]

Нет, надо чтобы t заканчивалось именно единицей, не больше. Если t будет > 1, то полином Берштейна также будет > 1 и кривая уплывет в сторону.