Математика в дизайне

Некоторые видели, что происходит, если на Маке ввести неправильный пароль для входа в систему. Вместо того, чтобы показывать модальное окно с кнопкой OK, он просто немножко подёргивает окошко влево-вправо, как будто вертит головой. Кроме того, что это весело, это ещё и не заставляет пользователя нажимать кнопку ОК.

Задача: сделать такую же штуку в E2 (проверить пароль, не перезагружая страницу, не проблема; мы займёмся только анимацией).

Многие дизайнеры и даже программисты настолько плохо дружат с физикой и математикой, что когда нужно добавить элементу массы (т. е. инерции) или реализовать правдоподобное подёргивание окна, они не в состоянии ничего придумать. Это печально. Мне понадобилась минута, чтобы придумать формулу, ещё 5 — чтобы сделать рабочий скрипт, а потом ещё 5, чтобы подобрать удачные коэффициенты.

Для начала пойдём в Гугль и спросим у него, где можно в онлайне построить график функции. Интернет — великая вещь: первая же ссылка приведёт нас на подходящий сайт. Отличное место, чтобы придумать формулу зависимости горизонтальной координаты окна от времени.

Колебания естественно ассоциируются с синусом, но нам нужно, чтобы они постепенно затухали. Первое, что пришло мне в голову — домножить синусоиду на гиперболу: (1 / x) × sin x.

Синусоида, умноженная на гиперболу

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

Предел sin x / x в нуле равен единице, что, конечно, лучше, чем бесконечность но всё-таки хочется, чтобы в точке 0 значение было нулевым, иначе в начале окно вдруг окажется на сто (например) пикселей правее, чем было до начала анимации. Нам нужно, чтобы гипербола в нуле получила конечное значение, тогда домножение на sin 0, равный нулю, даст ноль. Сдвинем гиперболу чуть левее, чтобы её точка разрыва уехала в неинтересующую нас отрицательную область: [1 / (x + 1)] × sin x.

Поскольку гипербола при увеличении x стремится к нулю, но никогда не достигает его, наши колебания, несмотря на затухание, будут продолжаться бесконечно. Можно, конечно, остановить их, когда они станут меньше пикселя, но намного проще чуть-чуть опустить гиперболу, чтобы она всё же достигла нуля через некоторое время: [1 / (x + 1) − 0,01] × sin x.

Чтобы было понятнее, взглянем на саму гиперболу, без синуса (1 / (x + 1) − 0,01):

Гипербола, сдвинутая так, чтобы пересекать оси

Сдвиги на 1 левее и на 0,01 ниже взяты от балды; после того, как скрипт уже написан, можно заниматься повышением реалистичности путём изменения этих чисел и примешивания всяческих коэффициентов.

Итоговая формула, с учётом перерисовки каждую 0,01 с, у меня получилась вот такая: [1 / (x1,25 / 20 + 0,5) − 0,05] × sin (x / 2) × 25.

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

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

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

Дальше
35 комментариев
Olhado Thelander 2009

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

Илья Бирман 2009

Мне так просто больше нравится :-) Пружинистость тут греет меня больше, чем похожесть на качание головой.

Олежик 2009

+ к предыдущему комментарию. там все-таки не приятная взгляду «резиночка», а предупредительный stick shaker: «эй, чувак! ну ты че?».

а график можно не выходя в инет строить с помощью Utilites/Grapher.app :-)

Илья Бирман 2009

О, клёвый апп!

Иван Неретин 2009

Дизайнер, у которого на первом месте знание физики, умножил бы синус на спадающую экспоненту, а потом с пеной у рта доказывал бы, что «иначе нефизично».

Илья Бирман 2009

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

Егор Львовский 2009

sin(x) * e^-(x/8)

Степан Столяров 2009

Сегодня трендово строить графики в Wolfram Alpha:

http://www76.wolframalpha.com/input/?i=(1+%2F+(x^(1.25)+%2F+20+%2B+0.5)+%E2%88%92+0.05)+*+sin+(x+%2F+2)+*+25

Илья Бирман 2009

Когда я это делал, я ещё не знал про Вольфрам-альфу :-)

Жомарт Амирханов 2009

Пружинистость мне тоже по душе. Зачёт!

Николай Товеровский 2009

Ровно эту же задачу решил так:
%%procedure THeadShaker.ShakeHead(AControl: TControl);
var
InitialLeft: Integer;
I: Integer;
TempShakesCount: Integer;
begin
if Assigned(AControl) then
begin
InitialLeft := AControl.Left;

for I := 0 to ShakesCount — 1 do
begin
AControl.Left := InitialLeft + ShakeMaxAmplitude — I*ShakeFading;
Application.ProcessMessages;
Sleep(DelayTime);

AControl.Left := InitialLeft — ShakeMaxAmplitude + I*ShakeFading;
Application.ProcessMessages;
Sleep(DelayTime);
end;
AControl.Left := InitialLeft;
end;
end;%%

Коэффициенты:
%%
ShakesCount := 8;
ShakeMaxAmplitude := 20;
ShakeFading := 3;
DelayTime := 40;
%%
(Код на Делфи)

Дрожит приятно, мне нравится. Не знаю правда насколько моя реализация похожа на маковскую, так как этот эффект я подсмотрел, когда 5 минут тыкал мак в Медиамаркте.

Басалаев Александр 2009

Если хотим пружинистое качание — лучше воспользоваться правильной формулой (см. #4). Физичное затухание пружины/маятника/электротока в контуре экспоненциальное. Sin(x)*Exp(-x/6) — то что нужно, и в нуле это ноль не потому что мы подогнали, а потому что так и есть в природе )

eldar 2009

Придумал знак для газпрома — метан (http://eldarr.livejournal.com/4072.html). Химия. Мелочь, конечно, но по смыслу, вроде, подходит. Вот только на письмо почему-то не ответили :-)

Алексей Кирпичников 2009

Ох, раз уж вы напомнили про логин в е2. Скажите, почему панельку логина привязали именно к Ctrl-Shift-L? В фаерфоксе это запускает фаербаг, в Хроме это запускает консоль яваскрипта, жутко раздражает. Это случайное совпадение? Планируете ли изменить привязку?

Илья Бирман 2009

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

Николай Товеровский 2009

Пример к вышесказанному HeadShakeForm.exe.

Алексей Скрипник 2009

Использовать <a href=«#»> для яваскриптовых ссылок — плохой тон. Лучше в качестве адреса поставить УРЛ этой заметки.

Леонид Климановский 2009

Хочется более человеческого поведения...
Некоторой рандомности в амплитуде реакции, резкости «качания головой» в первый момент, и направление чтобы менялось произвольно.
Как-то так ))

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

Сергей Коваленко 2009

для такого короткого по времени качания можно было создать массив отклонений и избавиться от вычислений внутри скрипта. А вообще, у пружин F= -k/x. Но качать головой лучше не по пружинному закону.

Более правильный совет дадут мультипликаторы.

homm 2009

Итоговая формула, с учётом перерисовки каждую 0,01 с, у меня получилась вот такая:

Для твоей реализации это не верно. У тебя сейчас просто 82 шага с рекомендованным временем между шагами 0,01 с, но на самом деле шаг никогда не будет равен этому времени в силу системных ограничений и производительности. Другими словами, если сейчас 10-й вызов функции nahStep, это совсем не значит что прошло 0,1 с.

Нужно пускать таймер на самый минимально доступный интервал и узнавать сколько времени прошло от начала анимации с помощью (new Date()).getTime() .

Илья Бирман 2009

Это я понимаю, но мне вломак так делать :-)

homm 2009

Николай Товеровский
Не знаю правда насколько моя реализация похожа на маковскую, так как этот эффект я подсмотрел, когда 5 минут тыкал мак в Медиамаркте.

Я этот эффект видел только один раз в Докторе Хаузе :) Грегори пытался войти в компьютер женщины, которая ему казалась черезчур честной, подбирал разные пароли, пока кто-то из его ассистентов не подошел и не нажал энтер при пустом окошке ввода. Пароля просто не было :)

Илья Бирман 2009

Слова «Хаус», «чересчур» пишутся через „с“.

Атари 2009

Встречает мастер своего преподавателя по вышке лет через восемь после окончания вуза, разговорились, вспомнили время былое. Профессор спрашивает:

  • Вот я вам читал три года высшую математику, скажи, в жизни тебе мои знания когда-нибудь пригодились?
    Студент, подумав:
  • А ведь был один случай.
  • Очень интересно, расскажите, я его буду на лекциях рассказывать, что высшая математика
    не такая абстрактная наука и в жизни бывает нужна.
  • Шел я как-то по улице, и мне шляпу ветром в лужу сдуло. Так я взял кусок проволоки, загнул его в форме интеграла и шляпу достал!
Kimosabe 2009

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

Илья Бирман 2009

Расскажете подробнее?

Сергей Чикуёнок 2009

Не знаю, как насчет физики, но с формулами Роберта Пеннера дизайнер знаком быть обязан: http://robertpenner.com/easing/easing_demo.html

У меня когда-то был спор с коллегой на тему использования физики в анимации. Стояла задача: сделать съезжающие по наклонной плоскости элементы. Коллега первым делом начал выводить физические формулы и строить анимации на основе них. Убил на это кучу времени. Результат был может и правдоподобным с точки зрения физики, но не красивым с точки зрения восприятия.

Я поступил иначе: взял одну из функций Пеннера (кубическое ускорение, по-моему) и использовал готовый анимационный фреймворк (например, jQuery или jTweener), немного поигравшись с длительностью анимации. Результат получился не точным с точки зрения физики, но более «киношным» и приятным всего за 10 минут.

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

robel 2009

В маке есть Grapher, можно в инет не лазить :)

Дмитрий К. 2009

Что ещё раз доказывает мою теорию: программист без знания математики и физики даром никому не нужен.
Сабж тоже, но это уже другой вопрос. Интересно оно может выглядеть только теоретически, а маковская «фишка» даже теоретически отвратительна.

Илья Бирман 2009

Дмитрий, комментарии на тему вашей ненависти к Маку и Айфону можете больше не оставлять. Во-первых ваша точка зрения уже ясна, а во-вторых она не представляет никакой ценности.

Тёма Казаков 2009

Илья, расскажите, пожалуйста, почему в ответе на комментарий #16 вы поставили букву «с» в лапки, а не елки. Уверен, что у вас есть обоснование, очень хочу его услышать. :0)

Илья Бирман 2009

Одиночные буквы всегда так оформляю. Лапки легче смотрятся. Когда буква одна, ёлки получаются визуально тяжелее, чем она сама, это нечестно :-)

Плюс дополнительный семантический инструмент: букву „с“ можно отличать от предлога «с» :-)

Антон Вернигор 2009

Дмитрий К., вы линуксоид или БСД-шник, верно? :-) Скорее, даже, линуксоид.

Илья Бирман 2009

Я вас прошу, давайте не будет разводить флеймов на эту тему, это ведь так скучно.

Антон Вернигор 2009

Илья, конечно, флейм это скучно, я просто хотел найти подтверждение своему предположению и всё.

Юрий Хан 2009

Что до линуксоидов, то в GNOME окошко разлочки тоже дёргается, плюс в нём надпись появляется.

Владимир 2009

Дизайн бывает разный. Например вот <a href=«http://www.ted.com/index.php/talks/ross_lovegrove_shares_organic_designs.html»>тут</a> человек рассказывает как в создании великолепных (но порою нелогичных) дизайнов ему помогает природа, в частности биология и биохимия.
Так что не математикой единой. :)

Виктор Немков 2009

Для #25: это не в гноме дергается, это демон запуска иксов дергает :)
Для Ильи: приятно видеть, что есть люди, думающие об удобстве для других людей.

Роман Парпалак 2009

Небольшое дополнение к третьему комментарию. Настоящий физик, конечно же, умножил бы экспоненту на косинус, а не на синус :)

А еще можно умножать косинус на убывающую линейную функцию. Это примерно соответствует сухому трению (экспонента — вязкому).

Вячеслав Ильинский 2009

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

Arsen 2009

Обратил внимание что срабатываение подергивания вызывает резкую и кратковременную нагрузку на проц. Это расчет по формуле или отрисовка браузера создает нагрузку? Если расчет, может лучше наверно посчитать параметры в оффлайн и загнать их в массив? (не изящно, зато разумно с точки зрения производительности)

A-Z 2009

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

«Класс! Я устала вам говорить, что половина не может быть большей или меньшей! А большая половина из вас этого не понимает!»

Вовка Соловьёв 2009

На флэше это лучший способ анимации. Как-то раз для <a href=«http://www.podhod.ru/portfolio/lighthouse»>сайта</a> оживлял чаек которые кружились вокруг маяка. По разным осям синусойды с различными коэффициентами. При взлете они махали крыльями, а при спуске планировали.

Делал для <a href=«http://miraxintv.com/»>другого сайта</a> изменение перспективы от положения мыши. Оказалось что приятнее выглядит когда перспектива меняется с затуханием, а не линейно.

Иван 2009

Почитал комменты. Пришла в голову мысль, что Вам в пору уже снимать кино или хотя бы писать книгу «Быть Ильёй Бирманом». Один только коммент по поводу одной буквы в другом комменте чего стоит!

Илья Бирман 2009

А я не в курсе кина.

Роман Парпалак 2009

Что-то я написал комментарий, не подумав. Косинус тут, разумеется, не нужен.

Илья Бирман 2009

Мне проще всегда взять что попало из них, и, если не попадёт, сдвинуть, чем думать, что попадёт.

Сергей К. 2009

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

Мои книги