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

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
Поделиться с друзьями
-->

Комментарии (13)


  1. Zenitchik
    06.02.2017 12:18

    Раньше я терпеть не мог дизайнеров. Но теперь вижу, что и из них иногда выходит что-то хорошее.


    1. Nekto_Habr
      06.02.2017 13:26

      Раньше я терпеть не мог дизайнеров

      Почему?


      1. Zenitchik
        06.02.2017 13:28
        -2

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


        1. Nekto_Habr
          06.02.2017 17:05

          *вздыхаю*

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

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

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

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


          1. Zenitchik
            06.02.2017 19:23

            Всё было бы хорошо, если бы я не знал дизайнеров, которым нравится такой подход.


        1. corvus
          07.02.2017 06:22

          Редко встречал программиста, который был бы специалистом по юзабилити.

          Не считал себя таковым (этих навалом), а действительно им был.


  1. Lsh
    06.02.2017 15:07

    Чем Processing лучше любых других ЯП с какой-нибудь библиотекой, которая умеет рисовать примитивы?
    Судя по кусочку кода, там надо программировать и нет никаких функций вжухСделтьКрасиво();


    1. GeMir
      06.02.2017 17:05

      «Чем Processing лучше» — хотя бы уже тем, что он знаком и понятен автору. А так, с тем же успехом можно рисовать экспортируемые в PDF картинки в TikZ.


      1. Lsh
        06.02.2017 18:37

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


        1. ru_vlad
          06.02.2017 19:38

          Там очень простые и понятные приемы работы с графикой и видео.
          Плюс почти все возможности ЯП.


  1. GeMir
    06.02.2017 17:01
    +3

    «Я изучал полигоны и создавал концепты в рождественские каникулы. Это самое захватывающее, что мне когда-либо приходилось изучать.» — сложно представить, что случится когда автор узнает о логарифмической спирали, а так же о спиралях Архимеда, Фибоначчи и Ферма.


    1. Lsh
      06.02.2017 19:56
      +1

      Да, честно говоря, результаты напоминают школьный урок информатики с Pascal'ем и «мячиком», который двигается по экрану.


  1. BigD
    12.02.2017 00:33

    Посоветуйте хорошие способы и ресурсы освежить математику с 0.