Освоение инструмента для рисования Adobe Illustrator — это фундаментальный навык любого профессионального графического дизайнера. Это важно, когда вы разрабатываете векторные изображения и шрифты. Большинство дизайнеров используют интуицию, чтобы решить, когда кривая выглядит или «чувствует» право. Но иногда это выглядит странно, и вы не можете понять, почему. Если вы ставите другой якорь? Возьмите его?
На самом деле есть наука за кривыми. В этой статье я объясню математику за кривыми и покажу вам, как ее использовать, чтобы ваши кривые выглядели более гладкими и более эстетически приятными.
Общей методикой в профессиональном программном обеспечении для проектирования САПР и шрифтов является использование визуализации под названием кривизны гребня чтобы увидеть, как вдоль его пути идет резкая или плоская кривая.
Вот пример гребня кривизны, используемого в Fontlab VI для сглаживания ухабистых пятен в шрифте:
Гребень кривизны — это бит янтарного цвета на краю каждой кривой. В качестве дизайнера вы можете использовать размер гребня, чтобы судить о том, насколько изощренной является линия и где имеются расхождения в кривой. (Обратите внимание на приведенный выше рисунок, как кривая становится более гладкой, когда появляются янтарные и красные биты.)
Чтобы объяснить, как работает эта визуализация, нам нужно будет быстро взглянуть на то, как работают кривые Безье.
Содержание статьи
Кривые Кубического Безье
—
Кривые Безье первоначально были изобретены двумя французскими инженерами, работающими в автомобильной промышленности — Паулем де Кастельау из Citroën и Пьером Безье, работающими в Renault. Эти кривые оказались очень полезными для проектирования криволинейных и аэродинамических форм, необходимых в автомобильном дизайне.
С момента своего изобретения кривые Безье были расширены для всех видов приложений, включая аэродинамику, анимацию и компьютерную графику.
Большинство векторных графических программ, таких как Adobe Illustrator, использует кубические кривые Безье для отображения кривых линий.
Кубическая кривая Безье определяется четырьмя точками: P₀, P₁, P₂ и P₃. Кривая начинается с P₀, движущегося к P₁, и достигает P₃, идущего от направления P₂. Перетащите ползунок внизу, чтобы посмотреть, как это выглядит в движении:
Положение вдоль кривой можно рассчитать по формуле:
Это может показаться немного сложным — но не волнуйтесь — я объясню.
Идея заключается в том, что это «смешивание» между контрольными точками P₀, P₁, P₂ и P₃, поскольку t идет от 0 до 1.
Подумайте об этой кривой, как о дороге. Вы находитесь в P₀, и вам нужно добраться до P₃, но это на другой стороне горы, поэтому вам нужно путешествовать по изогнутой дороге вокруг. Вначале вы покидаете свое исходное положение в P₀ и начинаете движение в направлении P₁, постепенно поворачивающегося к P₂, а затем, наконец, к P₃.
Первая производная кривой описывает наклон касательной кривой.
. Возвращаясь к нашему примеру, приведенному выше, это касается того, где ваши шины указывают (который контролируется тем, как сильно поворачивается ваше колесо) в любой момент, когда вы путешествуете. Когда вы начинаете, ваши шины, вероятно, указывают на многое прямо. Тем не менее, когда вы продвигаетесь по этому большому изгибу, вы поворачиваете колесо, чтобы указать свои шины на более резкий угол (или риск отгонять опасную скалу).
Первая производная также используется для вычисления линии, которая составляет 90º к кривой, иногда называемой нормальным . Если бы вы вывели свою руку из окна автомобиля, это было бы в этом направлении.
Вторая производная кривой:
Это начало получить немного более абстрактную … но по существу вторая производная описывает, как быстро меняется тангенс.
Возвращение в наш автомобиль: если первая производная — это то, где наши шины указывают, вторая — это то, сколько вы должны повернуть колесо, чтобы заставить его указывать в правильном направлении. Ближе к P₀ вы просто немного повернете колесо и держите его устойчивым, чтобы поддерживать свой путь, но по мере того, как вы входите в поворот шпильки вокруг t = 0,5, вам действительно нужно прокрутить колесо (изменение угла шины быстрее), чтобы убедиться, что вы остаетесь на дороге. Чем быстрее вы поворачиваете колесо (по сравнению с его устойчивым), это демонстрация второй производной.
Измерительная кривизна
—
Кривизна — это мера того, как «резко» меняется кривая. Это похоже на вторую производную выше, но она приспособлена для учета того, как кривые выглядят в 2D.
Плоские пятна имеют низкую кривизну, например, прямая линия имеет кривизну 0. Более острые области имеют более высокую кривизну. Обычно кривизна будет меняться по ходу кривой Безье.
Для измерения кривизны кубической кривой Безье мы будем использовать технику, описанную в курсах курса «Автоматизированный геометрический дизайн». Идея состоит в том, чтобы попытаться установить круг внутри кривой в каждой точке, чтобы круг едва касался. Математики называют это соприкасающимся кругом что в латине означает «поцеловать». ?
Как вы можете видеть, где кривая «острее», радиус круга меньше. И где кривая более мягкая, круг меньше. Другими словами, кривизна вычисляется как инверсия радиуса соприкасающегося круга.
Обращаясь к нормальным линиям с регулярным интервалом с длиной, основанной на кривизне, теперь у нас есть гребень кривизны :
Этот гребень кривизны — полезный инструмент для того, чтобы увидеть, какие части кривой «острее» (где зубы гребней длиннее) или «плоские» (где они короче).
Сочетание кривых
—
Если вы разрабатываете что-либо более сложное, чем четверть круга, вам неизбежно придется объединить несколько сегментов кривой. Это создает проблемы, если вы хотите, чтобы ваши фигуры выглядели гладкими во всех точках, где соединяются сегменты кривой.
Попробуйте перетащить ползунок выше — он перемещает точку, соединяющую две кривые Безье.
Когда количество кривизны в точке соединения не совпадает, вы можете заметить, что он может выглядеть «комковатым». Это потому, что кривая внезапно перескакивает с одной кривизны на другую. Эти внезапные скачки кривизны называются прерываниями непрерывности .
Попробуйте переместить ползунок до тех пор, пока количество линий кривизны не будет с обеих сторон.
Ах, намного лучше! ?
Загрузка...
