Лабораторная работа 2

Лабораторная работа 2


Вторая лабораторная работа посвящена векторной графике.




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

План действий 


  1. Знакомство издалека. Открываем редактор картинок Google (у кого нет адресов в Google, я могу завести вам на @2013.auditory.ru). Там рисуем простую картинку и сохраняем как SVG. Смотрим файл, понимаем, что это текстовый файл XML, что-нибудь там исправляем и смотрим, что получается.
  2. Изучаем возможности формата. Делаем простые задачки на основе примеров.
  3. Отчитываемся результатами выполнения задачек.
  4. Отличники делают задачки посложнее и добавляют их решения к отчету. 


Часть 1. Знакомство с SVG (2 балла)

Следующие материалы вам могут пригодиться:

  1. Откройте Google Drive, создайте новый рисунок. Нарисуйте там какую-нибудь фигуру с заливкой.
  2. Сохраните файл как SVG. 
  3. Откройте его в блокноте.
  4. Найдите там цвет заливки, размер холста и описание фигуры. 
  5. Измените цвет заливки и размер холста, сохраните как новый файл.
  6. Результаты загрузите на диск Google. Запишите себе старые и новые значения цвета и размера холста, они пригодятся в отчете.

Часть 2. Изучаем простые примеры и пробуем повторить их сами (4 балла)

На этой странице собраны разнообразные примеры возможностей формата SVG и соответствующего кода.  Бегло просмотрите ссылки, некоторые из примеров вам пригодятся в этом упражнении.
  1. Задание 1: Нарисуйте снеговика или другую простую картинку (несколько фигур). Этой информации вам должно быть достаточно для выполнения задачи.
  2. Задание 2: Сделайте страницу с переключаемыми видами изображения. Пример вам в помощь.

Часть 3. Изучаем интерактивные элементы и анимацию (6 баллов)

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



  1. Возьмите снеговика, которого сделали в предыдущей части, снабдите его выбором цвета заливки (combo box или selection list), а так же кпопной включения-выключения анимации (button).
  2. Анимируйте нарисованную фигуру. Например, пусть подпрыгивает, причем, скорость плавно изменяется (вверху ниже, внизу выше). Здесь пример найдите сами. 

Часть 4. Творческое задание (8 баллов)

Предыдущие задания вы теоретически можете успеть сделать в аудитории, а это потребует чуть больше времени, его нужно сделать аккуратно и эстетично. Надеюсь, вы не будете упражняться в "кто страшнее намалюет". Все-таки это задание "на отлично".
Выберите любой вариант из предложенных. Можете придумать свой, важно, чтобы: 
  • была анимация, 
  • она была управляема неким действием пользователя, 
  • анимация не должна быть просто линейной, хотя бы скорость меняйте (машинка разгоняется, снежинка меняет направление движения плавно, ...).
  • где-нибудь использовалось хотя бы одно растровое изображение, в идеале -- еще и маска(и).

  • Вариант 1. Нарисуйте падающие снежинки. Выделите активные зоны, при наведении мыши на которые будет дуть ветер (меняться направление движения) и меняться фоновое изображение. 
  • Вариант 2. Нарисуйте стрелочный секундомер. Управление (запуск, фиксация, стоп). Минутная стрелка движется дискретно, а если осилите -- перемещение стрелки имеет плавные разгон и остановку. Вот пример SVG-кода анимированных стрелочных часов, которые вы видите под этим текстом. Код откомментирован. А вот эти даже берут системное время и код там значительно компактнее, хотя и смотрятся так себе. Секундомер выглядит примерно так.
  • Вариант 3. Вертолётик. У вас есть кнопки вверх, влево и вправо, нарисованный вертолетик при нажатии любой из них начинает крутить винтом и перемещается согласно нажатию кнопок. При этом, если отпустить кнопку "вверх", то он будет медленно опускаться, постепенно набирая вертикальную скорость. Рассмотрите обработку клавиатуры. Можете отработать случай падения с большой высоты.




Комментариев нет:

Отправить комментарий

Подписаться на: Сообщения (Atom)