Разработка урока информатики Кривые Безье и артистические средства CorelDraw

Кривые Безье

Разработка урока информатики Кривые Безье и артистические средства CorelDraw

Кривые Безье используются в компьютерной графике для рисования плавных изгибов, в CSS-анимации и много где ещё.

Несмотря на «умное» название – это очень простая штука.

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

Виды кривых Безье

Кривая Безье задаётся опорными точками.

Их может быть две, три, четыре или больше. Например:

По двум точкам:

По трём точкам:

По четырём точкам:

Если вы посмотрите внимательно на эти кривые, то «на глазок» заметите:

  1. Точки не всегда на кривой. Это совершенно нормально, как именно строится кривая мы рассмотрим чуть позже.

  2. Степень кривой равна числу точек минус один.Для двух точек – это линейная кривая (т.е. прямая), для трёх точек – квадратическая кривая (парабола), для четырёх – кубическая.

  3. Кривая всегда находится внутри выпуклой оболочки, образованной опорными точками:

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

Основная ценность кривых Безье для рисования – в том, что, двигая точки, кривую можно менять, причём кривая при этом меняется интуитивно понятным образом.

Попробуйте двигать точки мышью в примере ниже:

Как можно заметить, кривая натянута по касательным 1 → 2 и 3 → 4.

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

Вот некоторые примеры:

Математика

У кривых Безье есть математическая формула.

Как мы увидим далее, для пользования кривыми Безье знать её нет особенной необходимости, но для полноты картины – вот она.

Координаты кривой описываются в зависимости от параметра t⋲[0,1]

  • Для двух точек:P = (1-t)P1 + tP2
  • Для трёх точек:P = (1−t)2P1 + 2(1−t)tP2 + t2P3
  • Для четырёх точек:P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

Вместо Pi нужно подставить координаты i-й опорной точки (xi, yi).

Эти уравнения векторные, то есть для каждой из координат:

  • x = (1−t)2×1 + 2(1−t)tx2 + t2x3
  • y = (1−t)2y1 + 2(1−t)ty2 + t2y3

Вместо x1, y1, x2, y2, x3, y3 подставляются координаты трёх опорных точек, и в то время как t пробегает множество от 0 до 1, соответствующие значения (x, y) как раз и образуют кривую.

Впрочем, это чересчур наукообразно, не очень понятно, почему кривые именно такие, и как зависят от опорных точек. С этим нам поможет разобраться другой, более наглядный алгоритм.

Рисование «де Кастельжо»

Метод де Кастельжо идентичен математическому определению кривой и наглядно показывает, как она строится.

Посмотрим его на примере трёх точек (точки можно двигать). Нажатие на кнопку «play» запустит демонстрацию.

Алгоритм построения кривой по «методу де Кастельжо»:

  1. Рисуем опорные точки. В примере выше это 1, 2, 3.

  2. Строятся отрезки между опорными точками 1 → 2 → 3. На рисунке выше они коричневые.

  3. Параметр t пробегает значения от 0 до 1. В примере выше использован шаг 0.05, т.е. в цикле 0, 0.05, 0.1, 0.15, … 0.95, 1.

    Для каждого из этих значений t:

    • На каждом из коричневых отрезков берётся точка, находящаяся от начала на расстоянии от 0 до t пропорционально длине. Так как коричневых отрезков – два, то и точек две штуки.Например, при t=0 – точки будут в начале, при t=0.25 – на расстоянии в 25% от начала отрезка, при t=0.5 – 50%(на середине), при t=1 – в конце отрезков.
    • Эти точки соединяются. На рисунке ниже соединяющий их отрезок изображён синим.
При t=0.25При t=0.5
  1. На получившемся отрезке берётся точка на расстоянии, соответствующем t. То есть, для t=0.25 (первый рисунок) получаем точку в конце первой четверти отрезка, для t=0.5 (второй рисунок) – в середине отрезка. На рисунках выше эта точка отмечена красным.

  2. По мере того как t пробегает последовательность от 0 до 1, каждое значение t добавляет к красной кривой точку. Совокупность таких точек для всех значений t образуют кривую Безье.

Это был процесс для построения по трём точкам. Но то же самое происходит и с четырьмя точками.

Демо для четырёх точек (точки можно двигать):

Алгоритм:

  • Точки по порядку соединяются отрезками: 1 → 2, 2 → 3, 3 → 4. Получается три коричневых отрезка.
  • На отрезках берутся точки, соответствующие текущему t, соединяются. Получается два зелёных отрезка.
  • На этих отрезках берутся точки, соответствующие текущему t, соединяются. Получается один синий отрезок.
  • На синем отрезке берётся точка, соответствующая текущему t. При запуске примера выше она красная.
  • Эти точки описывают кривую.

Этот алгоритм рекурсивен. Для каждого t из интервала от 0 до 1 по этому правилу, соединяя точки на соответствующем расстоянии, из 4 отрезков делается 3, затем из 3 так же делается 2, затем из 2 отрезков – точка, описывающая кривую для данного значения t.

Нажмите на кнопку «play» в примере выше, чтобы увидеть это в действии.

Ещё примеры кривых:

С другими точками:

Петелька:

Пример негладкой кривой Безье:

Так как алгоритм рекурсивен, то аналогичным образом могут быть построены кривые Безье и более высокого порядка: по пяти точкам, шести и так далее. Однако на практике они менее полезны. Обычно используются 2-3 точки, а для сложных линий несколько кривых соединяются. Это гораздо проще с точки зрения поддержки и расчётов.

В задаче построения кривой Безье используются «опорные точки». Они, как можно видеть из примеров выше, не лежат на кривой. Точнее говоря, только первая и последняя лежат на кривой, а промежуточные – нет.

Иногда возникает другая задача: провести кривую именно через нужные точки, чтобы все они лежали на некой плавной кривой, удовлетворяющей определённым требованиям. Такая задача называется интерполяцией, и здесь мы её не рассматриваем.

Существуют математические формулы для таких построений, например многочлен Лагранжа.

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

Итого

Кривые Безье задаются опорными точками.

Мы рассмотрели два определения кривых:

  1. Через математическую формулу.
  2. Через процесс построения де Кастельжо.

Их удобство в том, что:

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

Применение:

  • В компьютерной графике, моделировании, в графических редакторах. Шрифты описываются с помощью кривых Безье.
  • В веб-разработке – для графики на Canvas или в формате SVG. Кстати, все живые примеры выше написаны на SVG. Фактически, это один SVG-документ, к которому точки передаются параметрами. Вы можете открыть его в отдельном окне и посмотреть исходник: demo.svg.
  • В CSS-анимации, для задания траектории или скорости передвижения.

Источник: https://learn.javascript.ru/bezier

Создание рисунков из кривых в CorelDraw

Разработка урока информатики Кривые Безье и артистические средства CorelDraw

Описание: Ход урока Группа инструментов Curve Кривая В этой группе собраны инструменты для рисования кривых произвольной формы. Freehnd Кривая Данный инструмент позволяет рисовать кривые произвольной формы.

После того как кнопка будет отпущена появится кривая форма которой будет повторять траекторию указателя мыши.

Точность с которой кривая соответствует траектории задается в поле Freehnd Smoothing Сглаживание кривой расположенном в правой части панели свойств.

Дата добавления: 2015-08-27

Размер файла: 11.5 KB

Работу скачали: 47 чел.

Поделитесь работой в социальных сетях

Если эта работа Вам не подошла внизу страницы есть список похожих работ. Так же Вы можете воспользоваться кнопкой поиск

Тема: Создание  рисунков из кривых

Цель  занятия: изучить способы создания, редактирования и преобразования рисунков из кривых в CorelDraw.

Тип: усвоение новых знаний.

Оборудование: компьютер, проектор, доска.

План

  1.  Организационный момент 3 мин.
  2.  Изучение нового материала 35 мин.
  3.  Закрепление нового материала 5мин.
  4.  Домашнее задание 2 мин.

Ход урока

В этой группе собраны инструменты для рисования кривых произвольной формы.

Freehand (Кривая)

Данный инструмент позволяет рисовать кривые произвольной формы. Есть два способа рисования.

Первый заключается в том, чтобы нажать левую кнопку мыши и, не отпуская ее, вести указатель по странице документа. После того как кнопка будет отпущена, появится кривая, форма которой будет повторять траекторию указателя мыши. Точность, с которой кривая соответствует траектории, задается в поле Freehand Smoothing (Сглаживание кривой), расположенном в правой части панели свойств.

Второй способ позволяет рисовать прямые. Первый щелчок кнопкой мыши задает начальную точку отрезка, второй — конечную.

Если нужно присоединить сегмент к уже нарисованной кривой, выделите ее и подведите инструмент Freehand (Кривая) к одной из граничных точек. Указатель мыши примет характерную форму изогнутой черной стрелки. Щелкните кнопкой мыши, и создаваемая кривая станет продолжением существующей.

Bezier (Кривая Безье)

Каждый щелчок этим инструментом создает узел кривой Безье. Однократный щелчок приводит к созданию прямого узла. Если после щелчка не отпускать кнопку мыши, а отвести указатель в сторону, появится не только узел, но и его направляющие.

Artistic Media (Художественные средства)

Под этим именем объединены сразу пять инструментов, позволяющих создавать необычные графические эффекты обводки. Выбрать один из режимов инструмента можно на панели свойств, щелкнув (при активном инструменте Artistic Media (Художественные средства)) на соответствующей кнопке в ее левой части.

Вы можете придать один из описанных ниже графических эффектов уже нарисованной фигуре. Для этого достаточно выделить ее, активизировать инструмент Artistic Media (Художественные средства) и выбрать соответствующие параметры на панели свойств.

Сама панель свойств изменяется в зависимости от выбранного режима.

Pen (Перо)

Рисование пером очень напоминает создание кривых с помощью инструмента Bezier (Кривая Безье) по принципу«узел за узлом». Для окончания работы с инструментом Pen (Перо) нужно дважды щелкнуть кнопкой мыши.

Если на панели свойств кнопкой включен Preview Mode (Режим просмотра), то в процессе рисования вы будете видеть, как ведут себя создаваемые сегменты кривой.

Нажатие кнопки Auto Add-Delete (Автоматическое добавление/удаление) позволяет не только рисовать линию, но и добавлять или удалять узлы на ней.

Polyline (Сложная линия)

Еще один способ рисования кривых. Фактически инструмент Polyline (Сложная линия) — это Pen (Перо) в режиме Preview Mode (Режим просмотра).

3-Point Curve (Кривая по трем точкам)

Этот инструмент позволяет рисовать кривые не совсем привычным способом: в точке, в которой вы нажимаете кнопку мыши, создается начальный узел, в точке, где кнопка отпускается, — конечный, а место повторного щелчка определяет изгиб дуги.

Interactive Connector (Интерактивная соединительная линия)

Соединяет две фигуры ступенчатой или прямой линией. Если после этого преобразовать любой из объектов, к которому проведена такая соединительная линия, она изменится вместе с объектом.

Dimension (Размерные линии)

Инструмент Dimension (Размерные линии) позволяет строить выносные размерные линии. Очень удобная возможность для тех, кто создает в CorelDRAW чертежи.

Построение отрезков прямых линий

  1.  Выбрав инструмент Кривая (указатель мыши примет вид тонкого перекрестия).
  2.  Рисование линии начинается с помещения перекрестие в точку, из которой следует начать линию, и щелчком левой кнопки мыши.
  3.  Перемещение указателя мыши в точку, где линия должна закончится, создаст отрезок прямой, который можно переместить мышью, наклонить, сделать короче или длиннее.

FОбратите внимание на строку состояния DX – расстояние по горизонтали от начала строящегося отрезка до его конца; DY – расстояние по вертикали от начала строящегося отрезка до его конца; Расстояние – длина отрезка; Угол – угол наклона.

  1.  Построение заканчивается еще одним щелчком мыши.

FДля удаления построенной линии – выделите ее и нажмите Delete.

Фиксированные углы наклона линии

  1.  При построении отрезка инструментом Кривая, необходимо удерживать нажатой клавишу Ctrl. В строке состояния угол наклона будет изменяться скачками с интервалом в 150.

Кривая Безье

Термин кривая Безье своим происхождением обязан имени математика Пьера Безье (Pierre Bezier) который еще в 1970-х годах сформулировал принципы, которыми руководствуются при построении большинства векторных объектов.

Согласно его теории, все фигуры рассматриваются как состоящие из сегментов и точек. Линии, составляющие фигуру Безье, могут быть прямыми, кривыми либо комбинированными, т.е. состоящими из прямых и кривых.

Форма и тип линии определяются свойствами точек, которые соединяются данными линиями. Множество из двух или более точек, соединенных прямолинейными  или криволинейными сегментами, называется кривой.

Объединение двух или более кривых для получения разрывной последовательности сегментов или последовательности сегментов с угловыми точками, носит название составной кривой.

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

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

При построении кривой в этом режиме вначале определяются конечные точки (узлы), а затем из них проводятся отрезки. Каждое нажатие левой кнопки мыши определяет место расположения нового узла на странице.

До тех пор пока вы щелкаете кнопкой мыши и перетаскиваете или перемешаете указатель инструмента Кривые Безье, будет рисоваться одна и та же кривая.

Для завершения сеанса рисования надо либо выбрать любой другой инструмент, либо замкнуть кривую и начать рисовать новую.

Построение отрезков прямых линий

  1.  Выберите инструмент  Кривая Безье
  2.  Щелкните мышью в начальной точке, затем в конечной точке, сразу же появиться отрезок прямой.
  3.  Одиночными щелчками последовательно зафиксируйте положение еще двух узлов.
  4.  Переместите указатель мыши на начальный узел и, еще раз, однократно щелкните мышью. Построенные отрезки должны образовать замкнутую линию.

Рисование кривых в режиме Кривая

  1.  Выберите инструмент Кривая, поместите указатель мыши в точку начала кривой и нажмите левую кнопку мыши.
  2.  Удерживая левую кнопку мыши, переместите указатель по траектории, совпадающей с кривой, которую необходимо построить (рис. 1).
  3.  Доведя указатель до конца кривой, отпустите кнопку мыши. На кривой появятся точки отмечающие узлы.

Для стирания части кривой, удерживая левую кнопку мыши и клавишу Shift, переместите указатель в обратном направлении, по длине участка, который нужно стереть. После стирания, отпустите клавишу Shift и продолжите рисование в нужном направлении.

Построение кривых в режиме Кривая Безье

Принцип построения: размещается узел и устанавливаются две направляющие точки, определяющие наклон и величину изгиба кривой.

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

Правила определения положения направляющих точек:

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

Закрепление нового материала

  1.  Инструмент Кривая?
  2.  Способы построения линий?
  3.  Кривая Безье?
  4.  Принципы построение отрезков прямых линий,построение кривых из несколких сегментов.

рис. 1

Источник: http://refleader.ru/jgemerujgrnabew.html

Ваш педагог
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: