Въпроси на преподаването
APPLICATION OF MATHEMATICAL MODELS IN GRAPHIC DESIGN
https://doi.org/10.53656/math2022-1-5-app
Резюме. The articlesharesthepracticalexperience in creatinggraphicdesign in the implementation of projects in the field of applied information technology. The creation of digital art is largely based on mathematical models and concepts that give a good perception of graphics, and it is scientifically justified. The STEAM approach is considered with the idea of the transdisciplinary level of integration between mathematics, graphic design and production practice in student education. For the development of projects like logo design, magazine cover and others, we use software specialized in the field of graphic design and computer graphics. For the realization of the considered projects, among which there are also awarded ones, we use CorelDRAW, Adobe InDesign and Desmos.
Ключови думи: Graphic design; Computer graphics; Digital art; Bézier curves; Logo design; STEAM.
The new art must be based upon science – in particular,
upon mathematics, as the most exact,
logical, and graphically constructive of the sciences.
Albrecht Durer
Mathematics and art, according to the great German artist – Albrecht Durer, mathematician and art critic, combine rational scientific knowledge with philosophy and the dynamic fantasy of art. Only through knowledge of proportions, perspective and symmetry can a true work of art be created.
Mathematics and art have a historical connection during all periods of development of human civilization. Artists have used mathematics since the 4th century BC, when the Greek sculptor Polycleitus wrote his “Canon”, determining the proportions of the ideal naked male figure, based on the ratio \(1: \sqrt{2}\). Mathematics directly influenced art with conceptual tools such as linear perspective, symmetry analysis, and mathematical objects such as polyhedra and the Möbius strip (Gardner 1956). Mathematical concepts such as recursion and logical paradox can be seen in paintings by Rene Magritte and in engravings by Moritz Cornelis Escher (Escher 2001). Computer art often uses fractals, including the Mandelbrot set, and sometimes explores other mathematical objects such as cellular automata.
Since the advent of computers, digital art has developed as part of computer science and contemporary art, which uses digital technology as part of the process of creation or presentation. The art of the new media includes concepts such as digital art, computer graphics, computer animation, virtual art, internet art, interactive art, video games, computer robotics, 3D printing and etc. (Paul 2015).
Digital art can be generated entirely from a computer (such as fractals and algorithmic art) or taken from other sources such as a scanned image or an image, drawn with vector graphics software, using a mouse or graphics tablet. Works of art are considered digital paintings when they are created in a similar way to non-digital paintings, but use software on a computer platform and digitally display the resulting image as painted on canvas (Wands 2006).
Bézier curves and Color models are presented in the project “Application of mathematical models in graphic design”. Their application in logo and magazine cover projects is discussed. The logo has been ranked first in a national competition for logo design of the School Institute of the Bulgarian Academy of Sciences (SchI-BAS) and the design is the new logo of the Institute. The magazine cover is created as a part of student’s graphic design project task. The construction of the composition and the color decision of Nikol Manolova’s projects is in accordance with the main concepts of the theory of colors (Goethe 2018). The STEAM educational approach is аlso discussed with the idea of combining mathematical models with color theory and skillful application in practice in the field of graphic design and advertising in the education of students, studying computer graphics and digital art.
1. Bézier curves
Bézier curves are the most versatile curves in professional vector computer graphics. All important prepress programs work with Bézier curves – Adobe Illustrator, CorelDRAW, etc. Generally, a variant with four points is used – initial, final and two intermediate. The curve passes through the two ends, and the intermediates play the role of “magnets” that easily control the shape. Thus, every conceivable curve can be represented as a finite number of interconnected 4-point Bézier curves. Here we present quadratic and cubic Bézier curves, but there are also higher-order Bézier curves, that need correspondingly more intermediate points. In general, all inscriptions, logos and vector graphics, which are seen on printed materials, television, etc., are created on the basis of Bézier curves (Mortenson 1999).
Quadratic Bézier curve
The quadratic Bézier curve is a Bézier curve of second degree and is determined by 3 points ( \(P_{0}, P_{1}\) and \(P_{2}\) ), as shown on Figure 1.
Figure 1. Quadratic Bézier curve
The mathematical formula for description of a quadratic Bézier curve with three control points is:
(1) \[ B(t)=(1-t)^{2} P_{0}+2(1-t) t P_{1}+t^{2} P_{2} \]
Given the coordinates of the three control points: \(P_{0}\left(x_{0}, y_{0}\right), P_{1}\left(x_{1}, y_{1}\right)\) and \(P_{2}\left(x_{2}, y_{2}\right)\), the curve coordinates can be described by the equation (1) that depends on the parameter \(t\) from the segment \([0,1]\).
In other words, we can put \(x\) and \(y\) instead of \(P\) in (1) to get corresponding coordinates. For instance, the quadratic Bézier curve is formed by points \((x, y)\), calculated as:
(2) \(x=(1-t)^{2} x_{0}+2(1-t) t x_{1}+t^{2} x_{2} \\ \)
(3) \(y=(1-t)^{2} y_{0}+2(1-t) t y_{1}+t^{2} y_{2} \)
Instead of \(x_{0}, x_{1}, x_{2}, y_{0}, y_{1}, y_{2}\) we should put coordinates of the three control points, and then as \(t\) moves from 0 to 1 , for each value of \(t\) we will have \((x, y)\) of the curve.
For example, if the control points of our curve have the following coordinates: \((0,0),(0.5,1)\) and \((1,0)\), then the equations (2) and (3) will become:
(4) \(x=(1-t) t+t^{2} \)
(5) \(y=-2 t^{2}+2 t \)
Since we have the equations (4) and (5), now as \(t\) runs from 0 to 1, the set of values \((x, y)\) for each \(t\) forms the curve for such control points, as shown on Figure 2, where the curve is generated with an online dynamic software for mathematics Desmos.
Figure 2. Quadratic Bézier curve, Desmos
Cubic Bézier curve
The cubic Bézier curve is a Bézier curve of third degree and is determined by 4 points (\(P_{0}, P_{1}, P_{2}\) and \(P_{3}\) ); here the curve starts at \(P_{0}\) and stops at \(P_{3}\). The cubic Bézier curve is presented on Figure 3, where the line \(P_{0} P_{1}\) is a tangent to the curve at point \(P_{0}\) and the line \(P_{2} P_{3}-\) at point \(P_{3}\). The role of \(P_{1}\) and \(P_{2}\) is to provide targeted information. The distance between \(P_{0}\) and \(P_{1}\) determines “how long” the curve moves in direction to \(P_{1}\) before turning to \(P_{3}\).
Figure 3. Cubic Bézier curve
The mathematical formula for description of a cubic Bézier curve with four control points is:
(6) \(B(t)=(1-t)^{3} P_{0}+3(1-t)^{2} t P_{1}+3(1-t) t^{2} P_{2}+t^{3} P_{3}\)
Again, as soon as we have the coordinates of the four control points: \(P_{0}\left(x_{0}, y_{0}\right)\), \(P_{1}\left(x_{1}, y_{1}\right), P_{2}\left(x_{2}, y_{2}\right)\) and \(P_{3}\left(x_{3}, y_{3}\right)\), , the curve can be described by the equation (6) that depends on the parameter \(t\) from the segment \([0,1]\).
Bézier curves are defined by their control points which contribute to the smooth behaviour of the curve. In this way, Bézier curves are used in computer graphics, modeling and vector graphic editors for making complex shapes and drawing smooth lines (Mortenson 1999).
Logo project of the School Institute of the Bulgarian Academy of Sciences (SchI-BAS)
In the article is discussed the application of quadratic and cubic Bézier curves in logo design as we present the logo of the School Institute of the Bulgarian Academy of Sciences (SchI-BAS) whose author is Nikol Manolova. The logo project shown on Figure 4 is created with the vector graphic program CorelDRAW.
The idea of the logo is to represent the main purpose of the School Institute of the Bulgarian Academy of Sciences (SchI-BAS) – to give opportunity for showing and development of students with inclination to research and creativity in any of the fields of science, art and their applications. The logo aims to illustrate the aspiration and desire of human to make his/her dreams come true.
Figure 4. The logo of SchI-BAS, Author: Nikol Manolova
Тhe creating of the logo involved quadratic and cubic Bézier curves. Figure 5 shows a detailed example of the application of both types of curves in some of the logo elements.
Figure 5. Application of Bézier curves, Logo design
Moreover, we have made a study of the mathematical description of one of the curves. The logo element in the orange circle is made with the help of cubic Bézier curves. On Figure 6, the mathematical representation of a part of this element is shown in a two-dimensional coordinate system. The cubic curve is generated by the online dynamic software for mathematics Desmos.
The coordinates of the four control points in the definition of the cubic curve are: \(P_{0}(5.13,3.55), P_{1}(4.98,11.24), P_{2}(9.68,9.01)\) and \(P_{3}(13,12.73)\). By creating this curve, we can continue with the whole shape, producing a nice smooth line with an elegant movement from left to right in order to achieve the “flame” in the general idea of the logo design – the human and the flame together, revealing the aspiration and desire of students to research.
Figure 6. Cubic Bézier curve, Desmos
The logo of the School Institute of the Bulgarian Academy of Sciences is created with the vector graphic program CorelDRAW. First, we have to make a sketch of the future logo with a pencil, ink or other graphic material. Then, the sketch is scanned or photographed and after that we continue with the work on the logo in the graphic program, being it CorelDRAW, Adobe Illustrator or other vector graphic editor. Using the software integrated tools, we create the logo based on the sketch. For example, in CorelDRAW the tool that we use for creating curves is called Bézier Tool; its parameters can be changed for producing the desired curve. The logo should be saved in format \(10 \times 10 \mathrm{~cm}, 300 \mathrm{dpi}\), CMYK color model \({ }^{1)}\). One of the most used standard formats for presenting vector logo in the industry is \(10 \times 10 \mathrm{~cm}\), which shows how the logo will look in real life. Оther smaller size formats are \(2.5 \times 2.5\) cm and \(5 \times 5 \mathrm{~cm}\). These three formats help public to see whether the logo will look nice on different graphic design projects as business cards, flyers, billboards, etc. For the purpose of preparing the logo for printing, according to the standard for presentation of projects in the field of graphic design and advertising, the print resolution for high resolution output must be 300 dpi and the color model has to be CMYK.
2. Color models
Colors and their presence in our daily lives determine the way we look at the world. That is why color is the subject of study by some of the greatest minds of mankind.
The first serious and scientifically justified breakthrough in color theory was the work of Isaac Newton, who in the seventeenth century managed to prove that light is composed of different colors. His famous experiment with a prism caused the appearance of the visible spectrum of light, and thus the colors are divided into light (additive) and pigment (subtractive).
In 1810, Johann Wolfgang von Goethe published his “Theory of Colors” (Zur Farbenlehre). The book initially influenced the Pre-Raphaelites in the field of art, reflecting on painting, architecture and applied art. The ideas of merging all kinds of arts contribute to the conception of the book as an artistic unity of text, font and illustration.
In his book Goethe makes a general statement about the way colors are perceived in different circumstances, emphasizing the qualitative analysis of the color phenomena. Science has come to understand the difference between the optical spectrum in Newton’s understandings and the phenomenon of human perception of colors, presented by Goethe (Goethe 2018).
Nowadays, light colors are the basis of the RGB color model (Red, Green, Blue). All directly projecting devices – monitors, multimedia projectors, etc., work with these colors and every design for a screen is prepared in this color model. Pigment colors, in turn, are the own colors of the objects around us and mixing them leads to darkening. There are three main colors: Cyan, Magenta and Yellow. In printing industry, for compaction, it is added blacK to the model and therefore the CMYK model’s name comes.
The magazine cover design project of “Vogue” (Bulgaria) is created with the graphic program Adobe InDesign, as the construction of the composition and the color decision is in accordance with the main concepts of color theory \({ }^{2)}\). The combination of figural and geometric elements is consistent with the principles of painting – warm and cold, light and dark. The emerald color symbolizes romance, royalty, luxury, while the silver-gray combines the opposite qualities of black and white in achieving stability and harmony. While building the composition, the principle of balance between accumulation of elements and pause is used in combination with a choice of clean and elegant fonts in the text part.
Figure 7. Magazine cover design project of “Vogue” (Bulgaria) Author: Nikol Manolova
The application of mathematical models in art is the right basis for building a perfect composition and creating an exquisite work of fine art (Durer 2000). Combining mathematical models with color theory and skillful application in practice determines the development of STEAM education with applied character of mathematics in graphic design. The STEM /Science, Technology, Engineering, Math/ approach is a philosophy of education that encompasses teaching skills and subjects in a way that resembles real life. STEM is based on the idea of focused learning in the four areas – science, technology, engineering, mathematics – in an interdisciplinary and applied approach. A variant of STEM is STEAM, which includes A /Arts/. Art design and the arts are an important part of STEM-based education, as creative thinking and the development of creative talents is essential for the progress of innovation. What distinguishes STEM from traditional education and science is the enhanced learning environment that provides integration of science and its application in everyday life. STEM recognizes the fact that the constant advancement of technology is changing the way children learn, connect with others and interact with each other every day. Many STEM lessons involve building models and simulating situations. In this way, projects and programs can be created with the idea of integrating disciplines such as mathematics, graphic design and advertising and production practice. The purpose of the transdisciplinary level of integration in this case is to show students the interaction between the three subjects through topics related to the study of mathematical models – Bézier curves, and their wide application in graphic design and advertising with the implementation of a real task – creation of a trademark (company sign, logo) of a specific company.
Conclusion
The project “Application of mathematical models in graphic design” presents the symbiosis of mathematics and graphic design as a basis for producing wonderful creations and innovative ideas for the development of visual culture and art.
We have discussed the application of the mathematical models: Bézier curves and Color models, in graphic design. The goals and tasks are accomplished through Nikol Manolova’s projects of logo and magazine cover design. The construction of the composition and the color scheme of the projects are in accordance with the main concepts of color theory. Opportunities for further development of the presented project cover the field of two-dimensional computer graphics in the area of graphic design and advertising. There is a wide field for research and development in the combination of models from stereometry and their application in practice through graphic software for three-dimensional computer graphics. By integrating STEAM educational activities with applied character of mathematics in graphic design, students are given the opportunity to develop key skills such as: creative thinking; critical analysis; initiative and mathematical literacy, which provide them with a solid foundation for success, both in school and in real life.
Notes
1. CorelDRAW 12, 2004. Official training course [In Bulgarian].
2. Adobe InDesign CS2, 2006. Official training course [In Bulgarian].
REFERENCES
DURER, А., 2000. Treatises. Diaries. Letters [In Russian].
ЕSCHER, М., 2001. The Graphic work [In Bulgarian].
GARDNER, M., 1956. Mathematics, Magic and Mystery. Dover Publications.
GOETHE, J., 2018. Goethe’s Theory of Colours: Translated from the German. Forgotten Books.
MORTENSON, M. E., 1999. Mathematics for Computer Graphics Applications. Industrial Press.
PAUL, C., 2015. Digital Art. Thames & Hudson.
WANDS, B., 2006. Art of the Digital Age. Thames & Hudson.