Андрей Шапиро, Игорь Штанг

Исследование гра­фи­чес­кого напря­же­ния на ос­нове модели элек­тро­маг­нит­но­го по­ля

Приключение, начавшееся с вопроса о том, а что же скрывается за отношением вяло—напряжённо · Дата публикации 2 ноября 2016

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

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

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


Фаворский пишет:

Плоскость должна быть ограниченной, иначе она, может быть, не будет ровной. Тут можно привлечь в качестве аналогии силовое магнитное поле. Совсем иначе мы смотрим середину плоскости и края ее. Край плоскости образует, хотим мы этого или не хотим, обрамление, а центре — глубина — пространство. И вся плоскость должна быть построена напряженно-ритмически.

Ближе всех к «магнитной» теме подбирается Арнхейм в книге «Искусство и визуальное восприятие», глава «Равновесие»:

Центр [квадратного формата] — это часть сложной скрытой структуры, которую можно изучить с помощью диска (в той же степени, в какой металлические опилки повторяют силовые линии магнитного поля). Если диск поочередно располагать в различных местах квадрата, то можно обнаружить, что в одних случаях он выглядит более устойчивым, в других же он проявляет признаки натяжения в определенном направлении. Иногда его состояние может оказаться неопределенным и колеблющимся.

На основе рассуждений Арнхейм строит так называемый «структурный план» и изображает на нем силовые точки и линии формата:

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

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

В основе симулятора — закон электромагнитного взаимодействия Кулона. В применении к композиции его можно сформулировать так:

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

Приняты следующие допущения. Все объекты на листе — магниты с одноименными зарядами. Лист также является электромагнитным объектом, его границы намагничены и отталкивают от себя другие объекты.


Намагниченная рамка определяет силовое поле пустого листа, и это поле неоднородно. Чтобы его визуализировать, мы засеяли площадь формата чувствительными «волосками». Они, как и металлические опилки вокруг настоящего магнита, показывают направление и интенсивность магнитных волн. Чем сильнее на волосок действует поле, тем темнее он становится. Если поставить галочку «Поле», будут видны спокойные (светлые) и напряженные (темные) участки:

У симулятора два режима — статический и динамический. В статическом все объекты неподвижны, как на листе бумаги, — вне зависимости от того, какие силы на них действуют. Динамический режим приводит объекты в движение и позволяет им занять наиболее «комфортное» положение.
Примеры
Если поместить шарик у края формата, рамка вытолкнет его к центру. Центральное положение — самое спокойное и сбалансированное:
Шарик летит от края к центру
Объекты взаимодействуют не только с рамкой, но и друг с другом. Два шарика в центре уравновешены относительно формата, но напряжены между собой. Если включить динамический режим, они отскочат друг от друга на безопасное расстояние:
Два шарика рядом в центре
Чем массивней объект, тем больше его личное пространство и тем сильнее он будет его «охранять»:
Большой шарик отталкивает маленький
Беспорядочно разбросанные шарики выстроятся настолько равномерно, насколько это возможно:
Беспорядочно разбросанные шарики переходят в упорядоченную текстуру
Как видно из примеров, симулятор переводит объекты из напряженного состояния в спокойное, то есть уравновешивает композицию.

Что с этим делать

Представленная модель — это попытка дать физическое обоснование тем силам, которые на картине или макете воспринимаются интуитивно.


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


Симулятор можно использовать как наглядное пособие на занятиях по графическому дизайну. Он поможет «пощупать» такие категории композиции, как «равновесие» и «напряжение».


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

В публичном пространстве
Разбор двух видов напряжения Игорем Штангом
Разбор отрывка из «Точку и линию на плоскости» Игорем Штангом
Материалы для дальнейшего изучения
  1. Исходный код симулятора и статьи на Гитхаб
  2. Владимир Фаворский. Об искусстве, о книге, о гравюре. М.: Книга, 1986. С. 89.
  3. Рудольф Арнхейм. Искусство и визуальное восприятие. М.: Архитектура-С, 2012. С. 25.
  4. Tony Pritchard. Visual Language and Grammar: Dots and Lines.
  5. Видео с первым прототипом симулятора.
  6. Теория графического напряжения, доклад Игоря Штанга.
  7. Multiclick analysis — исследование кликов пользователей внутри квадрата.