«Что мы знаем о кривых Бернштейна-Безье?»

Что мы знаем о лисе?
Ничего, и то не все.
© Б. Заходер

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

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

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

Что мы знаем о кривых Бернштейна-Безье?

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

На вопрос о происхождении кривых Безье — а речь, конечно же, идёт именно о них, — меня натолкнул Илларион Гордон в беседе о том, каким должен быть дизайнерский инструмент нового поколения. Я хотел бы продолжить эту беседу и здесь, вместе с вами; сделать это я могу только одним способом — расскажу вам о происхождении самого, наверное, популярного инструмента построения векторных форм.

Кривые Безье — это частный случай многочленов Бернштейна

Когда я упоминаю Бернштейна, я обычно имею в виду Николая Александровича, выдающегося советского физиолога. Он занимался вопросами развития ловкости и тренировал олимпийских чемпионов. Сегодня же я говорю о его дяде Сергее Натановиче, которого занимали более абстрактные материи, и в 1912 году, чтобы доказать оптимизационную теорему Вейерштрасса, он изобрел некоторое семейство математических формул.

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

Потомственный инженер Пьер Этьен Безье работал в концерне Рено с 1933 года и к концу пятидесятых отвечал за автоматическую сборку и за проектирование станков с ЧПУ, которыми сверлили и фрезеровали детали машин.

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

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

Благодаря станкам с ЧПУ всё это можно было бы оптимизировать, если бы только контуры описывались достаточно простыми математическими кривыми, а лучше того — и вовсе прямыми! Вот, например, так (эти прекрасные изображения я позаимствовал из статьи Википедии).

Безье искал и нашёл способ, который позволил (и позволяет сегодня) дизайнеру задавать численные параметры кривой с помощью наглядного инструмента так, чтобы доработка методом «проб и ошибок» не требовала привлечения математиков.

Эта история была бы совсем скучной, если бы у Безье не было двойника-конкурента. Кривые Безье были опубликованы им в 1962 году, но открыты они были несколькими годами ранее. Поль де Кастельжо работал на Ситроен в атмосфере секретности и корпоративной тайны. Он не только выбрал то же семейство многочленов для решения аналогичной задачи — за три года до Безье! — но и придумал более удобный метод подстройки кривой, который мы сегодня и используем.

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

Впрочем, алгоритм де Кастельжо, широко используемый в САПР, на самом деле стоило бы назвать алгоритмом Карла де Боора, который его значительно доработал до текущего состояния.

Итого, один месье придумал кривые, которые получили имя другого месье, зато именем первого назвали один алгоритм, разработанный каким-то там херром. А всё из-за NDA!

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

С 1959 года берёт своё начало история систем автоматизированного проектирования. Безье продолжил свою работу в этой области, создал систему UNISURF и с 1965 года отвечал за все технические разработки Рено. Примечательно, что UNISURF вывели из эксплуатации в тот же год, когда сам Пьер Безье покинул этот концерн. Мне неизвестна взаимосвязь между этими событиями, зато известно, что Рено следующие десять лет сильно страдал от попыток выхода на другие рынки и реструктуризации, вызванной неудачами. Автомобили Рено при этом неизменно пользовались успехом.

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

Что такого особенного в кривых Безье?

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

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

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

Наконец, в проектировании используются кривые Безье, которые достаточно просты в вычислительном смысле.

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

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

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

Я задал себе вопрос: изменилось ли что-то к сегодняшнему дню? Какие свойства требуются нашей индустрии сегодня? Если бы некий джентельмен взялся придумывать подобные кривые сегодня, к какой форме он бы пришёл? Какими принципами он бы руководствовался?

Дизайн — это воплощение идеи.

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

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

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

Невозможно — за исключением тривиальных случаев — создать параллельные Безье-кривые. Более того, кривой Безье нельзя описать круг или эллипс — только приближения. А почему-то так часто оказывается, что мы хотим нарисовать что-то, отталкивающееся от круга или сходящееся к окружности. Тут у меня сразу нарисовался следующий вопрос!

Когда дизайнер рисует от руки эскиз, у него в голове нет кривых Безье. Когда зритель или арт-директор смотрит на картинку, они ведь тоже не видят эти кривые.

Что же человек в действительности видит, каким образом он воспринимает форму?

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

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

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

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

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

Наше непосредственное восприятие ближе всего к восприятию кругов

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

Мы без труда узнаём человека на этом изображении:

Многие сразу понимают, кто здесь изображён и что происходит:

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

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

Интересно, почему первые изображения считываются нами быстрее тех, что я привёл в конце? Следует отметить, что некоторые объекты на картинках мы узнаём быстрее прочих. В частности, человеческие лица. Я обвёл несколько кругов на одной из демонстраций Плахова, чтобы показать вам одну интересную вещь.

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

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

То же самое происходит и при взаимодействии с продуктами нашего дизайна.

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

Создание простых для восприятия форм является одной из непременных технических задач дизайна

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

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

До распространения САПР дизайнеры работали иначе.

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

САПР перевернул процесс: теперь проектировщик лепит объёмную форму из примитивов, неизменно включающих в себя кривые Безье в форме сплайнов, и затем получает нужные проекции готовыми чертежами.

Однако же, обратите внимание: сегодня формы уже не вытачиваются, не высверливаются и не фрезеруются. Основной производственный инструмент объёмного модельера — трёхмерный принтер, которого в общем-то не очень интересуют математические кривые, какими бы изящными они не были. Даже в собственной колыбели конструирования кривые Безье сегодня перестали быть необходимостью. Почему бы от них и вовсе не отказаться?

Отказавшись от инструмента, приспособленного под станки с ЧПУ, мы будем вынуждены вернуться к традиционным средствам проектирования и придумывать новые инструменты, которые были бы ближе к восприятию. Но не лучше ли взять старые?

От чего оттолкнуться, если в нашем восприятии нет места кривым Безье, как нет там и прямоугольников, и треугольников, и других фигур?

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

Эти открытия, впрочем, уже давно были сделаны.

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

Я в своих раскопках смог, наконец, привязать абстрактные правила, которые раньше принимал за мудрость древних, к каким-то более глубоким основаниям. Модульная сетка для меня стала внезапно гораздо более понятным и значимым инструментом.

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

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

В этом месте я хочу вспомнить высказывание, приписываемое Дитеру Рамсу.

Искусство дизайна — это искусство намеренной ошибки.

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

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

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

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

Тогда как портретная фотография, например, представляет человека на фотокарточке прямоугольного размера высотой большей, чем ширина. Желательно девять на двенадцать. И с подписью. Почему бы не использовать эту пропорцию?

Последнее время я наблюдаю моду исполнять гнёзда для юзерпиков в форме кругов. Почему?

Чем дизайнеру следует руководствоваться,
выбирая форму юзерпиков?

Между тем, совсем недавно, всего-то пятьдесят лет назад, эта задача имела только одно решение. Вот оно: отверстия под головы в стендах для тантамарески (да, эта штука так называется). Форма отверстия — эллипс.

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

Эллипс можно обнаружить и в другой, гораздо менее фривольной разновидности юзерпиков. Самая распространённая форма для надгробного портрета — овал.

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

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

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

Благодарности

Я хочу поблагодарить Дмитрия Неяглова и Иллариона Гордона за то, что они натолкнули меня на эту интереснейшую тему, а также Андрея Плахова — за прекрасные иллюстрации расфокусированного зрения.

Я также выражаю признательность авторам иллюстраций, позаимствованных мною с просторов интернета. Если вы нашли в моём рассказе свою иллюстрацию, пожалуйста, сообщите мне об этом, чтобы я указал ваше авторство.

Приложения

Данная статья послужила материалом для моего доклада на конференции уральских веб-разработчиков, которая проходила 20-21 февраля 2013 года в Челябинске. Я прикладываю к статье слайды и аудиозапись моего выступления.