The week's pick
Random Articles
Reseach Article
Web-based Visualization Tools to Demonstrate the Working of Sorting and Pathfinding Algorithms
| International Journal of Computer Applications |
| Foundation of Computer Science (FCS), NY, USA |
| Volume 184 - Number 12 |
| Year of Publication: 2022 |
| Authors: Shankar M. Patil, Ankit Joshi, Nikhil Sawant, Atharva Jagdale |
10.5120/ijca2022922096
|
Shankar M. Patil, Ankit Joshi, Nikhil Sawant, Atharva Jagdale . Web-based Visualization Tools to Demonstrate the Working of Sorting and Pathfinding Algorithms. International Journal of Computer Applications. 184, 12 ( May 2022), 13-20. DOI=10.5120/ijca2022922096
Abstract
This paper focuses on introducing web-based visualization tools that demonstrates the working of famous sorting and pathfinding algorithms. These tools aim toward providing abstract thinking to different algorithms by making use of animations and 3D models which will stimulate the working of each separate algorithm in a unique way. To demonstrate the working of path-finding algorithms, 3D visualization tool having user-defined maze will be provided where each algorithm will be animated in a unique way to show how it traverses to find the shortest path between source and destination This maze will be constructed using WebGL libraries like react-three-fiber and external models like building representing path blocks will be loaded using GLTF (Graphics Language Transmission Format)Loaderprovided by ThreeJS. The second tool focuses on sorting algorithms which make use of each unique iteration of CSAlgorithms like bubble sort and animate its working by making use of a bar chart which will represent the array to be sorted. After selecting a sorting algorithm, these bars will be compared, swapped and animated to show working of these algorithms. Both the tools will be highly customizable and user input driven to provide them with a powerful and interesting tool to learn and experiment with different CSAlgorithms. Both the tools will be rendered in React DOM and work on principle that once an algorithm is executed its iteration and flow logs are captured which are used for performing animation using JavaScript and TweenJS libraries.
References
- L. Li, X. Qiao, Q. Lu, P. Ren and R. Lin, "Rendering Optimization for Mobile Web 3D Based on Animation Data Separation and On-Demand Loading," in IEEE Access, vol. 8, pp. 88474-88486, 2020, doi: 10.1109/ACCESS.2020.2993613.
- G. Qiu and J. Chen, "Web-based 3D map visualization using WebGL," 2018 13th IEEE Conference on Industrial Electronics and Applications (ICIEA), 2018, pp. 759-763, doi: 10.1109/ICIEA.2018.8397815.
- D. B. Silva, R. d. L. Aguiar, D. S. Dvconlo and C. N. Silla, "Recent Studies About Teaching Algorithms (CS1) and Data Structures (CS2) for Computer Science Students," 2019 IEEE Frontiers in Education Conference (FIE), 2019, pp. 1-8, doi: 10.1109/FIE43999.2019.9028702.
- Tao Chen and T. Sobh, "A tool for data structure visualization and user-defined algorithm animation," 31st Annual Frontiers in Education Conference. Impact on Engineering and Science Education. Conference Proceedings (Cat. No.01CH37193), 2001, pp. TID-2, doi: 10.1109/FIE.2001.963845.
- C. Peng, "The research and design Of 3D Web guide system based On WebGL," The 26th Chinese Control and Decision Conference (2014 CCDC), 2014, pp. 4052-4054, doi: 10.1109/CCDC.2014.6852890.
- Z. He, M. Shi and C. Li, "Research and application of path-finding algorithm based on unity 3D," 2016 IEEE/ACIS 15th International Conference on Computer and Information Science (ICIS), 2016, pp. 1-4, doi: 10.1109/ICIS.2016.7550934.
- H. Kim, S. Nam, J. Park and D. Ko, "Direct canvas: Optimized WebGL rendering model," 2018 IEEE International Conference on Consumer Electronics (ICCE), 2018, pp. 1-3, doi: 10.1109/ICCE.2018.8326257.
- P. Li, X. Yu and J. Wang, "Progressive compression and transmission of 3D model with WebGL," 2016 International Conference on Audio, Language and Image Processing (ICALIP), 2016, pp. 170-173, doi: 10.1109/ICALIP.2016.7846665.
- J. Chen and W. Fang, "An Improved Spatial Data Structure for Web-based Large-scale 3D Scene," 2019 IEEE 10th International Conference on Software Engineering and Service Science (ICSESS), 2019, pp. 681-684, doi: 10.1109/ICSESS47205.2019.9040768.
- H. Yutong, F. Wenlong and F. Yinshuang, "Research on model optimization based on 3DS max modeling," 2018 IEEE International Conference on Applied System Invention (ICASI), 2018, pp. 726-729, doi: 10.1109/ICASI.2018.8394362.
- Marek T., Krejcar O. (2015) Optimization of 3D Rendering in Mobile Devices. In: Younas M., Awan I., Mecella M. (eds) Mobile Web and Intelligent Information Systems. MobiWIS 2015. Lecture Notes in Computer Science, vol 9228. Springer, Cham. https://doi.org/10.1007/978-3-319-23144-0_4.
Index Terms
Keywords