12 KiB
Предисловие
Чтобы рисовать объекты в 2D, мы обычно полагаемся на линии, которые обычно подразделяются на две категории: прямые линии и кривые. Первые из них так же легко нарисовать, как их легко нарисовать на компьютере. Дайте компьютеру первую и последнюю точку в строке, и БАЦ! Прямая линия. Никаких сложностей не должно возникнуть.
Кривые, однако, представляют собой гораздо большую проблему. В то время как мы можем рисовать кривые с невероятной легкостью от руки, компьютеры немного ограничены в том, что они не могут рисовать кривые, если нет математической функции, описывающей, как они должны быть нарисованы. На самом деле, они также нуждаются в этом и для прямых линий, но функция до смешного проста, поэтому мы склонны игнорировать это в том, что касается компьютеров; все линии являются "функциями", независимо от того, прямые они или кривые. Однако это означает, что нам нужно придумать быстрые в вычислении функции, которые приводят к красивым кривым на компьютере. Их существует несколько, и в этой статье мы сосредоточимся на конкретной функции, которая получила довольно много внимания и используется практически во всем, что может рисовать кривые: кривые Безье.
Они названы в честь Пьера Безье, который сделал так, чтобы они стали известны миру как кривая, хорошо подходящая для проектных работ (опубликовал свои исследования в 1962 году, работая в Renault), хотя он не был первым или единственным, кто "изобрел" эти типы кривых. Может возникнуть соблазн сказать, что математик Поль де Кастельжо был первым, поскольку он начал исследовать природу этих кривых в 1959 году, работая в Citroën, и открыл действительно элегантный способ, как их нарисовать. Однако, Поль де Кастельжо не опубликовал свою работу, поэтому на вопрос, «кто был первым», трудно ответить в каком-либо абсолютном смысле. Либо это? Кривые Безье – это, по сути, «полиномы Бернштейна», семейство математических функций, исследованных Сергеем Натановичем Бернштейном, чьи публикации о них датируются, по крайней мере, до 1912 года.
В любом случае это в основном мелочи, вас, скорее всего, будет волновать то, что эти кривые удобны: вы можете связать несколько кривых Безье, чтобы комбинация выглядела как одна кривая. Если вы когда-либо рисовали "Путь" (Path – прим. пер.) в Photoshop или работали с программами векторного рисования, такими как Flash, Illustrator или Inkscape, эти кривые, которые вы рисовали, являются кривыми Безье.
Но что, если вам нужно будет запрограммировать их самостоятельно? В чем заключаются подводные камни? Как вы их рисуете? Что такое ограничительные рамки, как определяются пересечения, как можно вытянуть кривую, короче говоря: какие возможности они предоставляют и что можно сделать с этими кривыми? Вот для чего предназначена эта страница. Приготовьтесь к матчу!
Практически вся графика Безье интерактивная.
На этой странице используются интерактивные примеры, в значительной степени опирающиеся на Bezier.js, а также математические формулы, которые набираются в SVG с помощью XeLaTeX система набора текста и pdf2svg Дэвид Бартон.
Эта книга с открытым исходным кодом.
Эта книга представляет собой проект с открытым исходным кодом и хранится в двух репозиториях github. Во-первых, это https://github.com/pomax/bezierinfo и является версией исключительно для презентаций, которую вы просматриваете прямо сейчас. Другим хранилищем является https://github.com/pomax/BezierInfo-2 – это версия для разработки, в которой содержится весь код, и он превращается в веб-версию. Также в нём вы можете сообщать о проблемах, если обнаружите ошибки или у вас есть идеи, что улучшить или добавить в учебник.
Насколько сложной будет математика?
Большая часть математики в этом учебнике – это математика для начальной школы. Если вы разбираетесь в элементарной арифметике и умеете читать, у вас все должно получиться просто отлично. Иногда будут гораздо более сложные математические задачи, но если вам не хочется их переваривать, вы можете спокойно пропустить их, либо пропустив "подробные поля" в разделе, либо просто перейдя к концу раздела с математикой, которая выглядит слишком увлекательной. В конце разделов обычно просто перечисляются выводы, чтобы вы могли просто работать непосредственно с этими знаниями.
На каком языке написаны все примеры кода?
Существует слишком много языков программирования, чтобы отдать предпочтение одному из них, поэтому во всех примерах в этом учебнике используется форма псевдокода, которая использует синтаксис, достаточно близкий к современным скриптовым языкам, таким как JS, Python и т. д., но на самом деле это не они. Поэтому вы не сможете копировать-вставить что-либо, не задумываясь, это сделано намеренно: если читаете этот учебник, предположительно, вы хотите учиться, но вы не учитесь путем копирования-вставки. Вы учитесь, делая что-то самостоятельно, совершая ошибки, а затем исправляя эти ошибки. Конечно, я намеренно не добавлял ошибки в пример кода только для того, чтобы заставить вас ошибаться (это было бы ужасно!), Но я намеренно не позволял примерам кода отдавать предпочтение одному языку программирования перед другим. Не волнуйтесь, если вы знаете хотя бы один процедурный язык программирования, вы сможете прочитать примеры без каких-либо трудностей.
Вопросы, комментарии:
Если у вас есть предложения по новым разделам, перейдите по ссылке на Github (также доступно из репозитория, ссылка в правом верхнем углу). Если у вас есть вопросы по материалу, в настоящее время нет раздела комментариев, пока я его переписываю, но вы также можете использовать github для этого. Как только переписывание будет закончено, я снова добавлю раздел общих комментариев и, возможно, более актуальную систему "выберите этот раздел текста и нажмите кнопку "вопрос", чтобы задать вопрос об этом". Посмотрим.
Помогите поддержать книгу!
Если вам понравилась эта книга или просто сочли её полезной, сообщите об этом, чтобы оценить эту книгу, есть два варианта: можете либо перейти на страницу Patreon или, если вы предпочитаете сделать единовременное пожертвование, зайдите на страницу купить кофе Pomax. За эти годы эта работа из небольшого букваря превратилась в пособие, эквивалентное 100 с лишним печатным страницам, посвященное кривым Безье, и в его создание было вложено много кофе. Я не жалею ни минуты, потраченной на его написание, но мне всегда не помешает еще немного кофе, чтобы продолжать писать!