![Симулятор графического напряжения Шапиро—Штанга](https://habrastorage.org/getpro/habr/post_images/d2d/f8c/9c9/d2df8c9c9654c339c5a99e85fb6a5e8b.png)
Эта статья — попытка объяснить композиционные отношения с помощью физической аналогии. Она не претендует на полноту и объективность, мы делимся своими находками.
В поисках напряжения
Многие авторы, затрагивая тему композиции в дизайне и искусстве, сравнивают лист с магнитным полем, а взаимодействие элементов на плоскости — с взаимодействием заряженных частиц.
Фаворский пишет:
Плоскость должна быть ограниченной, иначе она, может быть, не будет ровной. Тут можно привлечь в качестве аналогии силовое магнитное поле. Совсем иначе мы смотрим середину плоскости и края ее. Край плоскости образует, хотим мы этого или не хотим, обрамление, а центре — глубина — пространство. И вся плоскость должна быть построена напряженно-ритмически.
Ближе всех к «магнитной» теме подбирается Арнхейм в книге «Искусство и визуальное восприятие», глава «Равновесие»:
Центр [квадратного формата] — это часть сложной скрытой структуры, которую можно изучить с помощью диска (в той же степени, в какой металлические опилки повторяют силовые линии магнитного поля). Если диск поочередно располагать в различных местах квадрата, то можно обнаружить, что в одних случаях он выглядит более устойчивым, в других же он проявляет признаки натяжения в определенном направлении. Иногда его состояние может оказаться неопределенным и колеблющимся.
На основе рассуждений Арнхейм строит так называемый «структурный план» и изображает на нем силовые точки и линии формата:
В центре все силы находятся в состоянии равновесия, и, следовательно, центральное расположение способствует наиболее спокойному состоянию. Другое сравнительно спокойное состояние можно найти, например перемещая диск по диагонали. По-видимому, точка равновесия лежит где-то вблизи угла квадрата, а не вблизи его центра. Это означает, что, несмотря на то, что центральная точка сильнее угловой, данное преимущество компенсируется большим расстоянием наподобие магнитов разной силы.
К сожалению, в найденных источниках сравнение композиционных сил с магнитными не выходит за рамки ощущений и остается всего лишь догадкой или красивой метафорой. Мы решили проверить эту догадку на практике и создали симулятор, который воспроизводит действие магнитного поля на плоскости листа.
Как работает симулятор
В основе симулятора — закон электромагнитного взаимодействия Кулона. В применении к композиции его можно сформулировать так:
Элементы на плоскости отталкиваются друг от друга с силой, пропорциональной их (визуальной) массе и обратно пропорциональной квадрату расстояния между ними.
Приняты следующие допущения. Все объекты на листе — магниты с одноименными зарядами. Лист также является электромагнитным объектом, его границы намагничены и отталкивают от себя другие объекты.
Намагниченная рамка определяет силовое поле пустого листа, и это поле неоднородно. Чтобы его визуализировать, мы засеяли площадь формата чувствительными «волосками». Они, как и металлические опилки вокруг настоящего магнита, показывают направление и интенсивность магнитных волн. Чем сильнее на волосок действует поле, тем темнее он становится. Если поставить галочку «Поле», будут видны спокойные (светлые) и напряженные (темные) участки:
![image](https://habrastorage.org/getpro/habr/post_images/6e1/73e/d13/6e173ed13241546bccfe94a6c052bdcb.png)
У симулятора два режима — статический и динамический. В статическом все объекты неподвижны, как на листе бумаги, — вне зависимости от того, какие силы на них действуют. Динамический режим приводит объекты в движение и позволяет им занять наиболее «комфортное» положение.
Примеры
Если поместить шарик у края формата, рамка вытолкнет его к центру. Центральное положение — самое спокойное и сбалансированное:
Объекты взаимодействуют не только с рамкой, но и друг с другом. Два шарика в центре уравновешены относительно формата, но напряжены между собой. Если включить динамический режим, они отскочат друг от друга на безопасное расстояние:
Чем массивней объект, тем больше его личное пространство и тем сильнее он будет его «охранять»:
Беспорядочно разбросанные шарики выстроятся настолько равномерно, насколько это возможно:
Как видно из примеров, симулятор переводит объекты из напряженного состояния в спокойное, то есть уравновешивает композицию.
Что с этим делать
Для начала попробуйте сами построить композиции и погонять шары в симуляторе.
Представленная модель — попытка дать физическое обоснование тем силам, которые на картине или макете воспринимаются интуитивно. «Застывшее», воображаемое движение статичной композиции в симуляторе становится настоящим движением. Во многом он подтверждает принципы, сформулированные Арнхеймом в книге «Искусство и визуальное восприятие».
Симулятор можно использовать как наглядное пособие на занятиях по графическому дизайну. Он поможет «пощупать» такие категории композиции, как «равновесие» и «напряжение».
Мы надеемся применить описанный подход в решения задач расстановки графических и типографических элементов на плоскости, чтобы обогатить инструментарий современного дизайнера.
Спасибо за внимание. Будем рады ответить на ваши вопросы и предложения.
Андрей Шапиро и Игорь Штанг
Материалы для дальнейшего изучения
- Исходный код симулятора и статьи на Гитхаб
- Владимир Фаворский. Об искусстве, о книге, о гравюре. М.: Книга, 1986. С. 89.
- Рудольф Арнхейм. Искусство и визуальное восприятие. М.: Архитектура-С, 2012. С. 25.
- Tony Pritchard. Visual Language and Grammar: Dots and Lines.
- Видео с первым прототипом симулятора.
- Теория графического напряжения, доклад Игоря Штанга.
- Multiclick analysis — исследование кликов пользователей внутри квадрата.