Foundation of Visualizer

Github: https://github.com/Ddoraaaaa/foundation-of-vis/

Made by
Dinh Phuc Nguyen
Hoang Giap Vu
Quang Anh Trinh

1. Introduction

Our project, called Foundation of Visualizer, is a web app to visualize programs and algorithms from basic computing subjects taught at the University of Melbourne.
To us, the future of media doesn’t have to be futuristic innovations from science fiction - media can change the way we perceive the world. In that spirit, we decided to focus on making the delivery of lecture content more visual, thereby helping the fluidity of the teaching and learning process.

2. Main features

Main features: A step-by-step visualization with code explanation. Supports input parameters from users. Tech used: p5.js
Almost everything was made from scratch, composed of only rudimentary elements like rectangles and text boxes. For more details, please watch our demo video.
How is it helpful?

Algorithms are abstract → Our app helps students understand the algorithms by demonstrating step by step and providing them with interactive tools.
Help lecturers demonstrate the material easily.

Issues we faced:
All 3 members of our team came from Competitive Programming backgrounds, working with C++ on dependent standard in/out programs. Therefore initially we had to spend a considerable amount of time familiarizing ourselves with Javascript and p5js.
We have never done a team project, so we lack experience in collaborating.

3. What’s next?

Content can be extended beyond Computing subjects: Abstract subjects like math and upper-level computing subjects.
Minigames to make the learning process not just easy, but fun!
Integrate into the university’s curriculum for real impact.

4. Conclusion

Although our team encountered some technical issues, we overcame the learning curve regarding p5.js and Github, and worked together as a team. Working on a team project for the first time has been a valuable experience for us, and we have learned a lot about designing apps and industry standards. We will continue to work on this project throughout this semester and (hopefully) deliver a finalized product soon. Thank you CISSA! ❤️