Skip to main content

Advertisement

SpringerLink
Log in

A modern approach to supporting program visualization: from a 2D notation to 3D representations using augmented reality

  • Published:
Multimedia Tools and Applications Aims and scope Submit manuscript

Abstract

The visualization of programs and algorithms has been demonstrated to be essential when learning to program. Nevertheless, existing graphic representations require a high level of abstraction that most beginner programmers cannot understand. Current state-of-the-art approaches provide promising alternatives, but a significant part leaves the advantages of graphic representation in the background. These advantages include abstracting the source code by means of symbols that make them easier to understand without previous training. This work introduces the evolution of a 2-D graphic notation to a 3-D environment, which represents an improvement to a complete platform for collaborative programming learning through problem solving, named COLLECE-2.0. This improvement provides the platform with capabilities to visualize programs through augmented reality by using a new set of graphic representations, which are based on roads and traffic signs in the context of programming learning. These visual models have been evaluated by Computer Science students to know whether the proposed notation is intuitive and useful. The obtained results show that the proposed notation is suitable for representing programming concepts and easy to understand. We also present a series of improvements, integrated as a new subsystem in the aforementioned platform, which allows the automatic construction of 3-D visualizations on an augmented reality environment. These visualizations use the proposed notation and leverage the scalability and architecture of COLLECE-2.0.

This is a preview of subscription content, log in via an institution to check access.

Access this article

Log in via an institution

Price excludes VAT (USA)
Tax calculation will be finalised during checkout.

Instant access to the full article PDF.

Institutional subscriptions

Fig. 1
Fig. 2
Fig. 3
Listing 1
Fig. 4
Fig. 5
Fig. 6
Fig. 7
Fig. 8
Fig. 9
Fig. 10
Fig. 11
Fig. 12
Fig. 13
Fig. 14
Fig. 15
Fig. 16
Fig. 17
Fig. 18
Fig. 19
Fig. 20
Fig. 21

Similar content being viewed by others

Notes

  1. The software is available for download from http://blog.uclm.es/grupochico/proyecto-iapro/collece-2-0/

  2. https://www.eclipse.org/cdt/

References

  1. Bacca J, Baldiris S, Fabregat R, Graf S, Kinshuk (2014) Augmented reality trends in education:, A systematic review of research and applications. Educ Technol Soc 17(4):133–149

    Google Scholar 

  2. Bischoff R, Kazi A, Seyfarth M (2002) The morpha style guide for icon-based programming. In: Proceedings of the 11th IEEE International Workshop on Robot and Human Interactive Communication, Berlin, Germany, pp 482–487, DOI https://doi.org/10.1109/ROMAN.2002.1045668, (to appear in print)

  3. Blackwell A, Green T (2003) Notational systems–the cognitive dimensions of notations framework. HCI models, theories, and frameworks: toward an interdisciplinary science. Morgan Kaufmann, Burlington

  4. Bloom BS (1956) Taxonomy of educational objectives, vol 1. McKay, New York, pp 20–24. Cognitive domain

    Google Scholar 

  5. Bosse Y, Gerosa MA (2017) Why is programming so difficult to learn? ACM SIGSOFT Softw Eng Notes 41(6):1–6

    Article  Google Scholar 

  6. Bravo C, Redondo MA, Verdejo MF, Ortega M (2008) A framework for process-solution analysis in collaborative learning environments. Int J Hum Comput Stud 66(11):812–832. https://doi.org/10.1016/j.ijhcs.2008.08.003

    Article  Google Scholar 

  7. Bravo C, Duque R, Gallardo J (2013) A groupware system to support collaborative programming: Design and experiences. J Syst Softw 86 (7):1759–1771. https://doi.org/10.1016/j.jss.2012.08.039

    Article  Google Scholar 

  8. Burgess N, Maguire EA, O’Keefe J (2002) The human hippocampus and spatial and episodic memory. Neuron 35 (4):625–641. https://doi.org/10.1016/S0896-6273(02)00830-9

    Article  Google Scholar 

  9. Chang SK (1987) Visual languages: a tutorial and survey. IEEE Softw 4(1):29–39. https://doi.org/10.1109/MS.1987.229792

    Article  Google Scholar 

  10. Cisar SM, Pinter R, Radosav A, Cisar P (2011) Effectiveness of program visualization in learning java: A case study with jeliot 3. Int J Comput Commun Control 6(4):669–682. https://doi.org/10.15837/ijccc.2011.4.2094

    Article  Google Scholar 

  11. Costagliola G, De Rosa M, Fuccella V, Perna S (2018) Visual languages: a graphical review. Inf Vis 17(4):335–350. https://doi.org/10.1177/1473871617714520

    Article  Google Scholar 

  12. Dann W, Cooper S, Pausch R (2001) Using visualization to teach novices recursion. ACM SIGCSE Bulletin 33(3):109–112. https://doi.org/10.1145/377435.377507

    Article  Google Scholar 

  13. Diehl S (2010) Software visualization: visualizing the structure, behaviour, and evolution of software. Springer, Berlin

    MATH  Google Scholar 

  14. Dishman L (2020) Why coding is still the most important job skill of the future. https://www.fastcompany.com/3060883/why-coding-is-the-job-skill-of-the-future-for-everyone, accessed: 2020-02-19

  15. Dunleavy M, Dede C (2014) Augmented reality teaching and learning. Springer, Berlin, pp 735–745. https://doi.org/10.1007/978-1-4614-3185-5_59

    Google Scholar 

  16. Gajraj RR, Williams M, Bernard M, Singh L (2011) Transforming source code examples into programming tutorials. In: Proceedings of the 6th international multi-conference on computing in the global information technology, Luxembourg, pp 160–164

  17. GlassDoor (2020) Best Jobs in America 2018. https://www.glassdoor.com/List/Best-Jobs-in-America-2018-LST_KQ0,25.htm, accessed: 2020-02-19

  18. Halabi O (2019) Immersive virtual reality to enforce teaching in engineering education. Multimed Tools Appl 79(3):2987–3004. https://doi.org/10.1007/s11042-019-08214-8

    Article  Google Scholar 

  19. Hansen WJ (1978) Measurement of program complexity by the pair: (cyclomatic number, operator count). SIGPLAN Not 13(3):29–33. https://doi.org/10.1145/954373.954375

    Article  Google Scholar 

  20. Hidalgo-Céspedes J, Marín-Raventós G, Lara-villagrán V (2016) Learning principles in program visualizations: a systematic literature review. In: Proceedings of the 46th Annual Frontiers in Education (FIE) conference, Erie, PA, USA. IEEE, pp 1–9, DOI 10.1109/FIE.2016.7757692, (to appear in print)

  21. Hundhausen CD, Douglas SA, Stasko JT (2002) A meta-study of algorithm visualization effectiveness. J Vis Lang Comput 13(3):259–290. https://doi.org/10.1006/jvlc.2002.0237

    Article  Google Scholar 

  22. Jimenez-Diaz G, Gonzalez-Calero PA, Gomez-Albarran M (2012) Role-play virtual worlds for teaching object-oriented design: the virplay development experience. Softw Pract Exp 42(2):235–253. https://doi.org/10.1002/spe.1071

    Article  Google Scholar 

  23. Jurado F, Molina AI, Redondo MA, Ortega M, Giemza A, Bollen L, Hoppe HU (2009) Learning to program with coala, a distributed computer assisted environment. J Univers Comput Sci 15(7):1472–1485. https://doi.org/10.3217/jucs-015-07-1472

    Article  Google Scholar 

  24. Jurado F, Molina AI, Redondo MA, Ortega M (2013) Cole-programming: Shaping collaborative learning support in eclipse. IEEE Revista Iberoamericana de Tecnologias del Aprendizaje 8(4):153–162. https://doi.org/10.1109/RITA.2013.2284953

    Article  Google Scholar 

  25. Kann C, Lindeman RW, Heller R (1997) Integrating algorithm animation into a learning environment. Comput Educ 28(4):223–228. https://doi.org/10.1016/S0360-1315(97)00015-8

    Article  Google Scholar 

  26. Karp RM (1972) Reducibility among combinatorial problems. Complex Comput Comput 1(1):85–103. https://doi.org/10.1007/978-1-4684-2001-2_9

    Article  MathSciNet  Google Scholar 

  27. Knight C, Munro M (2000) Virtual but visible software. In: Proceedings of the IEEE international conference on information visualisation, Londonm United Kingdom, pp 198–205, DOI https://doi.org/10.1109/IV.2000.859756, (to appear in print)

  28. Knuth DE (1997) The art of computer programming: sorting and searching, vol 3. Pearson Education, London

    MATH  Google Scholar 

  29. Koschmann T (1996) Paradigm shifts and instructional technology:, An introduction, Book section, vol 1, pp 1–23

  30. Lacave C, Molina AI, Giralt J (2013) Identificando algunas causas del fracaso en el aprendizaje de la recursividad: análisis experimental en las asignaturas de programación. In: Proceedings of the XIX Jornadas sobre la Enseñanza Universitaria de la Informática, Castellón de la Plana. Universitat Jaume I. Escola Superior de Tecnologia i Ciències Experimentals, Spain, pp 225–232

  31. Lacave C, Paredes-Velasco M, Ȧngel Velázquez-Iturbide J, Hernán I (2017) Experiencia para la evaluación de visback, una herramienta para la visualización de algoritmos de backtracking. Informá,tica Educativa Comunicaciones 23(26):83–94

    Google Scholar 

  32. Levy R B B, Ben-Ari M, Uronen P A (2003) The jeliot 2000 program animation system. Comput Educ 40(1):1–15. https://doi.org/10.1016/S0360-1315(02)00076-3

    Article  Google Scholar 

  33. Mathur AS, Ozkan BK, Majumdar R (2018) Idea: an immersive debugger for actors. In: Proceedings of the 17th ACM SIGPLAN International Workshop on Erlang, St. Louis, MO, USA, ACM. https://doi.org/10.1145/3239332.3242762, vol 3242762, pp 1–12

  34. McCabe TJ (1976) A complexity measure. IEEE Trans Softw Eng SE 2(4):308–320. https://doi.org/10.1109/TSE.1976.233837

    Article  MathSciNet  MATH  Google Scholar 

  35. Milne I, Rowe G (2004) Ogre: Three-dimensional program visualization for novice programmers. Educ Inf Technol 9(3):219–237. https://doi.org/10.1023/B:EAIT.0000042041.04999.17

    Article  Google Scholar 

  36. Molina AI, Gallardo J, Redondo MA, Bravo C (2014) Evaluating the awareness support of collece, a collaborative programming tool. In: Proceedings of the XV International Conference on Human Computer Interaction, Puerto de la Cruz. Tenerife, Spain, pp 74–81, DOI https://doi.org/10.1145/2662253.2662264, (to appear in print)

  37. Moody D (2009) The “physics” of notations: toward a scientific basis for constructing visual notations in software engineering. IEEE Trans Softw Eng 35 (6):756–779

    Article  Google Scholar 

  38. Myers BA (1990) Taxonomies of visual programming and program visualization. J Vis Lang Comput 1(1):97–123. https://doi.org/10.1016/S1045-926X(05)80036-9

    Article  MathSciNet  Google Scholar 

  39. Naps T L, Rößling G, Almstrum V, Dann W, Fleischer R, Hundhausen C, Korhonen A, Malmi L, McNally M, Rodger S (2002) Exploring the role of visualization and engagement in computer science education. In: Proceedings of the 7th annual conference on innovation and technology in computer science education, Aarhus, Denmark, ACM. https://doi.org/10.1145/960568.782998, vol 35, pp 131–152

  40. Nassi I, Shneiderman B (1973) Flowchart techniques for structured programming. ACM SIGPLAN Not 8(8):12–26. https://doi.org/10.1145/953349.953350

    Article  Google Scholar 

  41. National Center for Education Statistics (NCES) (2020) IPEDS Completions Survey. https://nces.ed.gov/ipeds/, accessed: 2020-02-19

  42. Nichols DA, Curtis P, Dixon M, Lamping J (1995) High-latency, low-bandwidth windowing in the jupiter collaboration system. In: Proceedings of the 8th annual ACM symposium on User interface and software technology, Pittsburgh, Pennsylvania, USA. ACM, pp 111–120, DOI https://doi.org/10.1145/215585.215706, (to appear in print)

  43. Ortega M, Redondo MÁ, Molina AI, Bravo C, Lacave C, Arroyo Y, Sánchez S, García MÁ, Collazos CA, Toledo JJ, Luna-García H, Velázquez-Iturbide JÁ, Gómez-Pastrana RA (ACM) Iprog: development of immersive systems for the learning of programming. In: Proceedings of the XVIII international conference on human computer interaction, Cancun, Mexico. https://doi.org/10.1145/3123818.3123874, vol 3123874, pp 1–6

  44. Price B, Baecker R, Small I (1998) An introduction to software visualization, book section, vol 1. MIT Press, Cambridge, pp 3–27

    Google Scholar 

  45. Robertson GG, Card SK, Mackinlay JD (1993) Information visualization using 3d interactive animation. Commun ACM 36(4):57–71. https://doi.org/10.1145/255950.153577

    Article  Google Scholar 

  46. Rowe G, Thorburn G (2000) Vince—an on-line tutorial tool for teaching introductory programming. Br J Educ Technol 31(4):359–369. https://doi.org/10.1111/1467-8535.00168

    Article  Google Scholar 

  47. Sajaniemi J, Kuittinen M (2003) Program animation based on the roles of variables. In: Proceedings of the 2003 ACM symposium on Software visualization, San Diego, California, USA, ACM. https://doi.org/10.1145/774833.774835, pp 7–ff

  48. Sanchez S, Garcia MA, Lacave C, Molina AI, Gonzalez C, Vallejo D, Redondo MA (2018) Applying mixed reality techniques for the visualization of programs and algorithms in a programming learning environment. In: Kush JC, Lester C (eds) Proceedings of the 10th International Conference on Mobile, Hybrid, and On-line Learning, Rome, Italy, IARIA XPS Press, vol 1, pp 84–89

  49. Sánchez S, García MÁ, Bravo C, Redondo MÁ (2017) Sistema collece mejorado para soportar aprendizaje colaborativo de la programación en tiempo real sobre eclipse. IE Comunicaciones 23(26):72–81

    Google Scholar 

  50. Sánchez S, Redondo MA, Vallejo D, González C, Bravo C (2017) Collece 2.0: A distributed real-time collaborative programming environment for the eclipse platform. In: Proceedings of the 11th International Conference on Interfaces and Human Computer Interaction, Lisbon, Portugal, IADIS, pp 1–7

  51. Simonak S (2016) Algorithm visualizations as a way of increasing the quality in computer science education. In: Proceedings of the 14th international symposium on applied machine intelligence and informatics, Herlany, Slovakia, pp 153–157, DOI https://doi.org/10.1109/SAMI.2016.7422999, (to appear in print)

  52. Teng CH, Chen JY (2012) An augmented reality environment for learning opengl programming. In: Proceedings of the 9th international conference on ubiquitous intelligence and computing and 9th international conference on autonomic and trusted computing, Fukuoka, Japan. IEEE, pp 996–1001, DOI https://doi.org/10.1109/UIC-ATC.2012.57, (to appear in print)

  53. Teng CH, Chen JY, Chen ZH (2017) Impact of augmented reality on programming language learning: Efficiency and perception. J Educ Comput Res 56(2):254–271. https://doi.org/10.1177/0735633117706109

    Article  Google Scholar 

  54. Teyseyre AR, Campo MR (2009) An overview of 3d software visualization. IEEE Trans Vis Comput Graph 15(1):87–105. https://doi.org/10.1109/TVCG.2008.86

    Article  Google Scholar 

  55. UNECE (1968) Convention on road signs and signals. United Nations Treaty Series, vol. 1091 pp 3

  56. US Bureau of Labor Statistics (2020) Employment by detailed occupation. https://www.bls.gov/emp/tables/emp-by-detailed-occupation.htm, accessed: 2020-02-19

  57. Urquiza-Fuentes J, Velázquez-iturbide JÁ (2012) A long-term evaluation of educational animations of functional programs. In: Proceedings of the 12th International Conference on Advanced Learning Technologies, Rome, Italy. IEEE, pp 26–30, DOI https://doi.org/10.1109/ICALT.2012.50, (to appear in print)

  58. Urquiza-Fuentes J, Velázquez-Iturbide JA (2013) Toward the effective use of educational program animations: the roles of student’s engagement and topic complexity. Comput Educ 67(Supplement C):178–192. https://doi.org/10.1016/j.compedu.2013.02.013

    Article  Google Scholar 

  59. Vasilopoulos IV, van Schaik P (2018) Koios: Design, development, and evaluation of an educational visual tool for greek novice programmers. J Educ Comput Res. https://doi.org/10.1177/0735633118781776

  60. Velázquez-Iturbide JA, Hernán-Losada I, Paredes-Velasco M (2017) Evaluating the effect of program visualization on student motivation. IEEE Trans Educ 60(3):238–245. https://doi.org/10.1109/TE.2017.2648781

    Article  Google Scholar 

  61. Vujošević-Janičić M, Tošić D (2008) The role of programming paradigms in the first programming courses. Teach Math 11(2):63–83

    Google Scholar 

  62. Wang P, Bednarik R, Moreno A (2012) During automatic program animation, explanations after animations have greater impact than before animations. In: Proceedings of the 12th Koli calling international conference on computing education research, New York, USA, pp 100–109, DOI https://doi.org/10.1145/2401796.2401808, (to appear in print)

  63. Yoel A, MAI, Carmen L, RMA, Manuel O (2018) The greedex experience: Evolution of different versions for the learning of greedy algorithms. Comput Appl Eng Educ 26(5):1306–1317. https://doi.org/10.1002/cae.22023

    Article  Google Scholar 

Download references

Acknowledgements

This work has been funded by the Ministry of Economy, Industry and Competitiveness, and the European Regional Development Fund through the project TIN2015-66731-C2-2-R.

Author information

Authors and Affiliations

  1. Department of Information Technologies and Systems, University of Castilla-La Mancha (Spain), Paseo de la Universidad 4, 13071, Ciudad Real, Spain

    Santiago Schez-Sobrino, María Á. García, Carmen Lacave, Ana I. Molina, Carlos Glez-Morcillo, David Vallejo & Miguel Á. Redondo

Authors
  1. Santiago Schez-Sobrino
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. María Á. García
    View author publications

    You can also search for this author in PubMed Google Scholar

  3. Carmen Lacave
    View author publications

    You can also search for this author in PubMed Google Scholar

  4. Ana I. Molina
    View author publications

    You can also search for this author in PubMed Google Scholar

  5. Carlos Glez-Morcillo
    View author publications

    You can also search for this author in PubMed Google Scholar

  6. David Vallejo
    View author publications

    You can also search for this author in PubMed Google Scholar

  7. Miguel Á. Redondo
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Santiago Schez-Sobrino.

Additional information

Publisher’s note

Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.

Rights and permissions

Reprints and permissions

About this article

Check for updates. Verify currency and authenticity via CrossMark

Cite this article

Schez-Sobrino, S., García, M.Á., Lacave, C. et al. A modern approach to supporting program visualization: from a 2D notation to 3D representations using augmented reality. Multimed Tools Appl 80, 543–574 (2021). https://doi.org/10.1007/s11042-020-09611-0

Download citation

  • Received:

  • Revised:

  • Accepted:

  • Published:

  • Issue Date:

  • DOI: https://doi.org/10.1007/s11042-020-09611-0

Keywords

Search

Navigation