The study of graphic voltage based on the model of the electromagnetic field

This article is an attempt to explain compositional relationships using a physical analogy. She does not claim to be complete and objective, we share our findings.

Looking for tension

Many authors, touching on the theme of composition in design and art, compare a sheet with a magnetic field, and the interaction of elements on a plane with the interaction of charged particles.

Tabor writes:

The plane must be limited, otherwise it may not be even. Here you can draw as an analogy the force magnetic field. Quite differently, we look at the middle of the plane and its edges. The edge of the plane forms, whether we want it or not, framing, and the center is depth-space. And the whole plane should be built intensely rhythmically.

The closest to the “magnetic” theme is Arnheim in the book “Art and Visual Perception”, chapter “Balance”:
')

The center [square format] is part of a complex hidden structure that can be studied with a disk (to the same extent that metal filings repeat the magnetic field lines). If the disk is alternately placed in different places of the square, then it can be found that in some cases it looks more stable, in others it shows signs of tension in a certain direction. Sometimes his condition may be uncertain and hesitant.

Based on the reasoning, Arnheim builds the so-called “structural plan” and depicts on it the force points and lines of the format:

In the center, all forces are in a state of equilibrium, and, consequently, the central location contributes to the most calm state. Another relatively calm state can be found, for example by moving the disk diagonally. Apparently, the equilibrium point lies somewhere near the corner of the square, and not near its center. This means that, despite the fact that the central point is stronger than the corner, this advantage is offset by a large distance like magnets of different strengths.

Unfortunately, in the sources found, the comparison of compositional forces with magnetic ones does not go beyond sensations and remains only a guess or a beautiful metaphor. We decided to test this guess in practice and created a simulator that reproduces the effect of a magnetic field on the plane of the sheet.

How the simulator works

The simulator is based on the law of Coulomb's electromagnetic interaction. In application to the composition it can be formulated as follows:

Elements on a plane repel each other with a force proportional to their (visual) mass and inversely proportional to the square of the distance between them.

The following assumptions are made. All objects on the sheet are magnets with like charges. The leaf is also an electromagnetic object, its borders are magnetized and push away other objects from it.

The magnetized frame defines the force field of a blank sheet, and this field is non-uniform. To visualize it, we sowed the area of ​​the format with sensitive hairs. They, like metal filings around a real magnet, show the direction and intensity of magnetic waves. The stronger the field acts on a hair, the darker it becomes. If you put a tick "Field", you will see calm (light) and tense (dark) areas:



The simulator has two modes - static and dynamic. In static, all objects are fixed, like on a sheet of paper, regardless of what forces act on them. The dynamic mode sets objects in motion and allows them to occupy the most “comfortable” position.

Examples

If you place the ball at the edge of the format, the frame pushes it towards the center. The central position is the most calm and balanced:



Objects interact not only with the frame, but also with each other. The two balls in the center are balanced relative to the format, but tense between themselves. If you enable dynamic mode, they will bounce apart from each other at a safe distance:



The more massive the object, the greater its personal space and the stronger it will “protect” it:



The randomly scattered balls will line up as evenly as possible:



As can be seen from the examples, the simulator translates objects from the stress state into a calm one, that is, it balances the composition.

What to do with it

To get started, try to build your own compositions and drive balls in the simulator.

The presented model is an attempt to give a physical substantiation to the forces that are perceived intuitively in a picture or layout. The “frozen”, imaginary movement of the static composition in the simulator becomes a real movement. In many ways, he confirms the principles formulated by Arnheim in the book Art and Visual Perception.

The simulator can be used as a visual aid in classes in graphic design. It will help to “touch” such categories of composition as “balance” and “tension”.

We hope to apply the described approach to solving tasks of placing graphic and typographic elements on the plane in order to enrich the tools of a modern designer.

Thanks for attention. We will be happy to answer your questions and suggestions.

Andrey Shapiro and Igor Shtang

Materials for further study

1. Simulator Source Code and Github Articles
2. Vladimir Favorsky. About art, about the book, about the engraving. M .: Book, 1986. p. 89.
3. Rudolf Arnheim. Art and visual perception. M .: Architecture-C, 2012. P. 25.
4. Tony Pritchard. Visual Language and Grammar: Dots and Lines.
5. Video from the first prototype of the simulator.
6. The theory of graphical stress, the report of Igor Stang.
7. Multiclick analysis - the study of user clicks inside the square.