OPERATIONAL MODEL OF A COLLAGE INFORMATION SYSTEM
DOI:
https://doi.org/10.35546/kntu2078-4481.2025.2.2.25Keywords:
collage information system, algorithmic model, tree-like structure, handleMoving, collageTree, collageRow, collageColumnAbstract
An analysis of existing online technologies (Photoshop Online, Canva, Pixlr Editor) identified significant shortcomings in their models, primarily the absence of automatic linkage between image containers. This results in substantial time spent on manual adjustments and potential errors in the final collage compositions. These issues particularly disrupt compositional integrity when resizing one or several collage elements.
The paper also analyzes known algorithmic models such as AutoCollage (automatic selection and arrangement of important image areas), Correlation-Preserving Photo Collage (grouping images based on semantic relationships), Aesthetic Photo Collage with Deep Reinforcement Learning (creating aesthetic compositions through reinforcement learning), and SoftCollage (differentiable collage composition based on probabilistic trees).
The fundamental contribution of this research is the development and detailed description of algorithms implementing the handleMoving function, designed for the automatic adaptation of collage elements during interactive repositioning and resizing by users. Algorithms were developed for three primary structural components: CollageTree (hierarchical tree structure of the collage), CollageRow (horizontal arrangement of elements), and CollageColumn (vertical arrangement of elements). The logic behind these algorithms is thoroughly described, accompanied by flowcharts illustrating the algorithmic processes of movement, size recalculations, and automatic adaptation of elements based on user actions. Detailed analysis of the developed algorithms demonstrated high efficiency, even when scaling collages containing a significant number of images. The handleMoving function, developed in this study, can complement or extend the aforementioned algorithmic models, ensuring automatic maintenance of compositional integrity during interactive collage editing.
References
Adobe Photoshop. (n.d.). Photoshop.adobe.com. URL: https://photoshop.adobe.com/discover
Angular. (2025). Angular.dev. URL: https://angular.dev/api
Canva. (2025). Canva. URL: https://www.canva.com/
Canvas API. (2019, December 2). MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
JSDoc: Home. (n.d.). Fabricjs.com. URL: http://fabricjs.com/docs/
Liu, L., Zhang, H., Jing, G., Guo, Y., Chen, Z., & Wang, W. (2017). Correlation-Preserving Photo Collage. IEEE Transactions on Visualization and Computer Graphics, vol. 24(6), pp. 1956–1968. DOI: 10.1109/TVCG.2017.2703853
Mozilla. (2019, March 4). WebGL: 2D and 3D graphics for the web. MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
Online Photo Editor | Pixlr Editor. (2019). Pixlr.com. URL: https://pixlr.com/editor/
Rother, C., Bordeaux, L., Hamadi, Y., & Blake, A. (2006). AutoCollage. ACM Transactions on Graphics, vol. 25(3), pp. 847–852. DOI: 10.1145/1141911.1141965
Yu, J., Chen, L., Zhang, M., & Li, M. (2022). SoftCollage: A Differentiable Probabilistic Tree Generator for Image Collage. 2022 IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR), pp. 3719–3728. DOI: 10.1109/CVPR52688.2022.00371
Zhang, M., Li, M., Chen, L., & Yu, J. (2021). Aesthetic Photo Collage with Deep Reinforcement Learning. ArXiv (Cornell University). DOI: 10.48550/arXiv.2110.09775
Fernández, D. P., Postels, J., & Tombari, F. (2021). Variational Transformer Networks for Layout Generation. Conference: 2021 IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR). DOI: 10.1109/cvpr46437.2021.01343
Chen, L., Jing, Q., Tsang, Y., & Zhou, T. (2024). Iris: a multi-constraint graphic layout generation system. Frontiers of Information Technology & Electronic Engineering, vol. 25(7), pp. 968–987. DOI: 10.1631/fitee.2300312
Huo, H., & Wang, F. (2022). A Study of Artificial Intelligence-Based Poster Layout Design in Visual Communication. Scientific Programming, vol. 2022, pp. 1–9. https://doi.org/10.1155/2022/1191073
Cao, Y., Ma, Y., Zhou, M., Liu, C., Xie, H., Ge, T., & Jiang, Y. (2022). Geometry Aligned Variational Transformer for Image-conditioned Layout Generation. Proceedings of the 30th ACM International Conference on Multimedia, vol. 1, pp. 1561–1571. DOI: 10.1145/3503161.3548332
Lu, Y., Tong, Z., Zhao, Q., Oh, Y., Wang, B., & Li, T. J.-J. (2024). Flowy: Supporting UX Design Decisions Through AI-Driven Pattern Annotation in Multi-Screen User Flows. ArXiv (Cornell University). DOI: 10.48550/arxiv.2406.16177
Shabani, M. A., Wang, Z., Liu, D., Zhao, N., Yang, J., & Furukawa, Y. (2024). Visual Layout Composer: Image- Vector Dual Diffusion Model for Design Layout Generation. 2024 IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR), pp. 9222–9231. DOI: 10.1109/cvpr52733.2024.00881
Shi, Y., Shang, M., & Qi, Z. (2023). Intelligent layout generation based on deep generative models: A comprehensive survey. Information Fusion, vol. 100, pp. 101940–101940. DOI: 10.1016/j.inffus.2023.101940
Hadi AlZayer, Lin, H., & Bala, K. (2021). AutoPhoto: Aesthetic Photo Capture using Reinforcement Learning. 2021 IEEE/RSJ International Conference on Intelligent Robots and Systems (IROS), pp. 944–951. DOI: 10.1109/iros51168.2021.9636788
Zhou, M., Xu, C., Ma, Y., Ge, T., Jiang, Y., & Xu, W. (2022). Composition-aware Graphic Layout GAN for Visual-Textual Presentation Designs. Proceedings of the 31 International Joint Conference on Artificial Intelligence, pp. 4995–5001. DOI: 10.24963/ijcai.2022/692
Zhou, Y., Jing, Q., Li, Z., Shi, L., Chen, L., & Sun, L. (2023). Element-Conditioned Gan for Graphic Layout Generation. Neurocomputing, vol. 591, pp. 127730. DOI: https://doi.org/10.1016/j.neucom.2024.127730
