GrabDuck

История о дизайнере, покоряющем математику

:

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

image

Я терпеть не могла математику


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

На самом деле, если подучить математику, можно создавать прекрасные концепты!


Во время учебы в университете я записалась на курс интерактивных искусств. Там мне показали, как творить с помощью кода в Processing. Вот один из примеров — восхитительная работа Мариуса Уотца (с тех пор я его поклонница).

Внимание! Содержит чрезмерную дозу великолепной удивительности.

image

Marius Watz <BValSys> 2011

Будучи амбициозной студенткой, я старалась как можно лучше воспроизвести стиль, не стремясь вникать в неприятные мне вещи. Например, я не хотела разбираться в sin(что-то там) или cos(что-то там).

image

Кхе-кхе, двойная петля

Если честно, я была довольна своей работой. Она выглядела интересно, и я потратила на неё гораздо меньше времени, чем если бы делала то же самое в Illustrator или Photoshop. И все же я осознавала, что без понимания геометрии у меня не было шансов даже приблизиться к тому, что делал Мариус Уотц.

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

Я принялась учить математику снова


image

Рекомендую смотреть видео для старшеклассников.

Найти учебные материала оказалось на удивление легко. Они повсюду! Если вас усыпляет сонный голос одного ведущего и контент кажется слишком сложным для понимания, всегда есть тысячи альтернатив. Лично я смотрела YouTube-канал корейского учителя математики (просто я знаком с содержанием учебника и корейскими математическими нормами).

Не могу сказать, что я развлеклась, но это помогло понять, что делал Мариус Уотц: когда он использовал косинус для позиции x и синус для позиции y.

Он просто помещал точку на круг!

Вместо чисел он пользовался тригонометрическими переменными, поэтому мог нарисовать точку, движущуюся по окружности!

Мои первые опыты в математике


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

image
http://share.framerjs.com/ejaybmwm4k95/

Я: ЛОЛ. Это так убого. *запостил в группе Framer в Facebook*
(Пару минут спустя)
Я: Что?! Людям нравится?!
(Пару часов спустя)
Я: Они думают, что я разбираюсь в математике. Вот это да!

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

Спиннер — отличный вариант для применения тригонометрии


Если не знаете, куда можно применить новые знания по тригонометрии — сделайте загрузочный спиннер (он же — круговой индикатор загрузки). Я использовала Framer для прототипирования.

Разработка анимаций для спиннера стала моим любимым занятием. Он в любом случае выглядит лучше простого вращающегося круга, при этом его не так уж сложно сделать. Нужно только подумать о трёх вещах:

  1. Сколько вершин будет у спиннера? (например, 3 вершины)
  2. Где на окружности будет располагаться каждая вершина? (например, каждые 120 градусов)
  3. Как вы хотите анимировать каждую вершину внутри цикла? (например, движение внутрь-наружу, сжатие-растяжение)

image
https://framer.cloud/ZePNP/

image
http://share.framerjs.com/e9f5sfvmrapa/

Всё что мне было нужно: эти три шага + знание основ тригонометрии. Вот так просто!

После изучения окружностей я перешла к треугольникам


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

В моём случае я не использовала Framer. Как вариант, я могла нарисовать прямоугольник и повернуть его так, чтобы он превратился в линию.

image

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

image
https://framer.cloud/rJ68Ono4g/

Освоение математики приносит больше удовлетворения, когда ты накладываешь дополнительные ограничения!

А вот и я, полигоны!


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

image
https://framer.cloud/H1fWocJSg/

Перед тем, как я узнала их получше, полигоны казались мне похожими на формочки для печенья. Я открывала Photoshop, Illustrator или Sketch и выбирала нужный инструмент для полигона. Я могла менять количество вершин от 5 до 12 — почти как выбирать разные формочки для печенья из ящика. Вот всё, что я знала о полигонах.

image

Скелет восьмиугольника

Узнав больше о полигонах, я поняла, что это прекрасные структуры из треугольников, которые только и ждут, чтобы превратиться во что-то большее!

Работа с дугами


Как я уже сказала, есть инструменты, с помощью которых можно нарисовать линию от точки А до точки В. К счастью, это касается и Processing! А ещё в нём по-настоящему легко рисовать дуги. Это оживило мою креативную сторону в использовании математики.

image

Работа в процессе!

image

Скетчи

Несмотря на то, что Processing — слегка устаревший на сегодняшний день язык, у него есть отличное свойство — рисунок можно экспортировать в pdf-файл. А это значит, что можно добавить больше деталей в других программах, например, в Illustrator и Photoshop.

image

Цветная версия

Бонус — мои собственные фигуры


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

И у вас может иногда не получаться, но это бывает даже забавно.

image

Талисман Олимпийских игр 1988

Есть еще один бонус от изучения геометрии — вы станете лучше понимать архитектуру.

image

Моя интерпретация архитектурного стиля района Гиндза в Токио

Смогу ли я использовать это в работе?


Ответ — да!

Если вы намереваетесь изучать что-то, что раньше ненавидели, убедитесь, что сможете применить новые знания в своей основной работе.

В моём случае (я занимаюсь дизайном мобильных приложений) я была удивлена, как много приложений, задействующих геометрию в дизайне UI! И вы можете легко поделиться своими знаниями с разработчиками, ведь большинство (или может все?) языки программирования в моей области поддерживают математические выражения.

Я продолжаю собирать примеры для этого кейса, поэтому ждите новых заметок :)

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

Можете подписаться на меня в твиттере ( @arle13) чтобы следить как я делаю небольшие смешные штуки.

image