Loading article...
Loading article...
Stream/Area:
-
Subject:
-
Paper ID:
IJSREM65804
Volume:
10 |
7 |
Jul 2026
Pages:
1-4
Publication Frequency:
Monthly (12 issues per year)
License:International Journal of Scientific Research in Engineering and Management follows the Creative Commons Attribution 4.0 (CC BY 4.0) License, allowing free use and distribution with proper attribution.
Computer Science and Engineering
Vidarbha Institute of Technology
Computer Science and Engineering
Vidarbha Institute of Technology
Computer Science and Engineering
Vidarbha Institute of Technology
Computer Science and Engineering
Vidarbha Institute of Technology
Computer Science and Engineering
Vidarbha Institute of Technology
The rapid advancement of web technologies has created opportunities to transform traditionally complex desktop-based applications into lightweight, accessible browser-based systems. Computer-Aided Design (CAD), which has long relied on high-performance software and skilled users, remains largely inaccessible for quick, intuitive 2D floor planning tasks. Existing solutions fall into two extremes: powerful desktop CAD tools that are complex, resource-intensive, and require technical expertise, and simple web-based planners that prioritize usability but lack geometric precision and intelligent automation. This gap highlights the need for a system that can balance accuracy, performance, and eae of use within a single platform. This project presents a web-based 2D layout planning system that leverages vector-based rendering, event-driven architecture, and computational geometry to provide a real-time, interactive design environment. The system is built on an SVG canvas mapped to a Cartesian coordinate system, where all elements such as walls, rooms, and objects are represented mathematically. User interactions are processed through a mode-based state mechanism, allowing dynamic interpretation of inputs for different operations such as wall drawing, object placement, and room configuration. Advanced geometric algorithms are integrated into the core engine, including line intersection detection, nearest-point snapping, ray casting for spatial identification, and polygon-based room detection. A key contribution of the proposed system is its ability to automatically detect closed wall structures and convert them into room entities using graph traversal techniques. The system further enhances usability by calculating room areas in real time using the Shoelace formula and providing continuous visual feedback during the design process. Unlike traditional CAD tools, which rely on manual validation and discrete operations, this system ensures continuous geometry processing, the use of a structured JSON-based data model allows efficient state management, enabling features such as undo/redo functionality and seamless data persistence through browser local storage.
KEYWORDS
The developed 2D layout planner demonstrates that complex CAD functionality can be effectively implemented within a lightweight, browser-based environment without relying on heavy desktop software. By integrating vector-based rendering, event-driven interaction, and real-time geometry processing, the system ensures both precision and usability. Unlike traditional CAD tools that depend heavily on user expertise, this system shifts key responsibilities such as alignment, snapping, and validation to automated algorithms, reducing human error and improving workflow efficiency. The system successfully addresses major limitations of existing methodologies by introducing continuous feedback, intelligent snapping, and automatic room detection. Features such as real-time area calculation and structured data handling further enhance the reliability and practicality of the application. As a result, the tool is not only suitable for professionals but also accessible to beginners who require a simplified yet accurate platform for floor plan design. This balance between technical accuracy and ease of use is the core strength of the proposed system. While the current system provides a strong foundation for 2D floor planning, it can be further enhanced to meet industry-level requirements. One major improvement would be the integration of 3D visualization using technologies like WebGL, allowing users to convert 2D layouts into interactive 3D models. Additionally, implementing cloud storage and multi-user collaboration features would enable real-time teamwork and accessibility across devices, making the system more practical for real-world usage.Further advancements can include support for standard file formats such as DWG or DXF to improve interoperability with existing CAD tools. The system can also be extended with AI-based features for automated layout suggestions, cost estimation, and optimization of space utilization. With these enhancements, the application has the potential to evolve from an academic project into a scalable, industry-ready solution for architectural design and planning.
[1] W3C, “Scalable Vector Graphics (SVG) 2 Specification,” 2018. [Online]. Available: https://www.w3.org/TR/SVG2/ [2] Mozilla Developer Network (MDN), “SVG Tutorial,” 2024. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/SVG [3] Mozilla Developer Network (MDN), “JavaScript Guide,” 2024. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide [4] Bootstrap Team, “Bootstrap 5 Documentation,” 2024. [Online]. Available: https://getbootstrap.com/docs/5.0/getting-started/introduction/ [5] J. D. Foley, A. van Dam, S. K. Feiner and J. F. Hughes, Computer Graphics: Principles and Practice, 3rd ed. Boston, MA, USA: Addison-Wesley, 2014. [6] M. de Berg, O. Cheong, M. van Kreveld and M. Overmars, Computational Geometry: Algorithms and Applications, 3rd ed. Berlin, Germany: Springer, 2008. [7] E. W. Weisstein, “Shoelace Formula,” MathWorld. [Online]. Available: https://mathworld.wolfram.com/ShoelaceFormula.html [8] GeeksforGeeks, “Line Intersection in Computer Graphics,” 2024. [Online]. Available: https://www.geeksforgeeks.org/line-intersection-in-computer-graphics/ [9] GeeksforGeeks, “Point in Polygon using Ray Casting Algorithm,” 2024. [Online]. Available: https://www.geeksforgeeks.org/point-in-polygon-in-cpp/
Publication Date
7/24/2026
Peer Review Type
Double-Blind Peer Review
Review Rounds: 2
Documents
Article Views
3
Total views since publication
PDF Downloads
7
Total downloads since publication
Geographic Reach
5
Digital Preservation: This article is permanently archived on Zenodo and complies with all data preservation standards across major indexing platforms.
Plagiarism Screening
This manuscript has been checked for plagiarism using TurnitinPlagiarismChecker software.
Conflict of Interest
The authors declare no conflict of interest related to this research work.
Funding Information
No funding information available for this research.
Related research in the same subject area
Loading similar articles...