A COMPREHENSIVE IMPLEMENTATION ALGORITHM 2D TRANSFORMATION IN GRAPHIC WEB-EDITORS BASED ON THE METHODS OF AFFINE TRANSFORMATIONS

A. M. Pasichnyk; T. Zh. Nadryhailo; О. V. Andrieiev

A. M. Pasichnyk Dniprovsky State Technical University https://orcid.org/0000-0002-8561-1374
T. Zh. Nadryhailo Dniprovsky State Technical University https://orcid.org/0000-0003-1239-5946
О. V. Andrieiev Dniprovsky State Technical University

Keywords: affine transformations, graphic editor, 2D transformations, web- editor, transformations in CSS, matrix decomposition.

Abstract

This article presents a complex algorithm for the optimized implementation of 2D transformations in graphic web editors based on the methods of affine transformations. The object of this study is the algorithms and methods of affine transformations for the implementation of 2D transformations in graphic web editors. The research is aimed at applying the principles of these transformations and their impact on graphic objects, as well as at finding effective solutions for their implementation. An analysis of the main existing algorithms and methods for implementing 2D transformations, such as the Bresenham and Wu algorithms for visualizing straight and curved lines, algorithms for filling areas using affine transformation methods, was carried out. Therefore, the issue of improving and simplifying algorithms and methods of affine transformations for implementing 2D transformations in graphic web editors is relevant and important for modern web design and development. The work considers the main algorithms of affine transformations that ensure the implementation of scaling, rotation, shift, skew functions and their interaction with graphic objects. The proposed algorithm includes the main advantages of implementing the above functions and allows you to create more efficient and high-quality graphic applications, providing at the same time greater functionality and productivity. Applying such an approach creates new opportunities for the development and use of new types of web editors in the field of web design. Based on the proposed algorithm, a web application has been developed that allows you to create various transformations and animations of figures on the plane. The results of the conducted testing confirm the effectiveness and possibility of applying the proposed approach in real projects for the development of graphic web editors for working with 2D transformations.

References

1. Algorithm Archive – Affine Transformations. [Електронний ресурс]. – Режим доступу: https://www.algorithm–archive.org/contents/affine_transformations/affine_transformations.html
2. W3Schools – CSS Transforms[Електронний ресурс]. – Режим доступу: https://www.w3schools.com/css/css3_2dtransforms.asp.
3. MDN Web Docs – transform–origin [Електронний ресурс]. – Режим доступу: https://developer.mozilla.org/en–US/docs/Web/CSS/transform–origin.
4. Tutorialspoint – Computer Graphics 2D Transformation. [Електронний ресурс]. – Режим доступу: https://www.tutorialspoint.com/computer_graphics/2d_transformation.htm.
5. Frederic Wang. Decomposition of 2D–transform matrices. [Електронний ресурс]. – Режим доступу: https://frederic–wang.fr/decomposition–of–2d–
6. Wikipedia – Bresenham’s line algorithm. [Електронний ресурс]. – Режим доступу: https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm.transform–matrices.html
7. James D. Foley. Computer Graphics: Principles and Practice 2nd Edition / James D. Foley, Andries van Dam, Steven K. Feiner, John F. Hughes // The System Programming Series, Addison-Wesley Publishing Company, 1996, 1250 p.
8. Addison–Wesley W3C Editor’s Draft – Chapter 8: Coordinate Systems, Transformations and Units. [Електронний ресурс]. – Режим доступу: https://www.w3.org/TR/SVG/coords.html.
9. Wikipedia – Bounding volume. [Електронний ресурс]. – Режим доступу: https://en.wikipedia.org/wiki/Bounding_volume.
10. VueJS Framework Documentation. [Електронний ресурс]. – Режим доступу: https://vuejs.org/.
11. MDN Web Docs – Window: requestAnimationFrame() method. [Електронний ресурс]. – Режим доступу: https://developer.mozilla.org/en–US/docs/Web/API/window/requestAnimationFrame