[OOP.20251-10] Tree Data Structures Visualization Project

📖 Introduction

Welcome to our Tree Data Structures Visualization Project!

This interactive desktop application allows users to visualize operations and algorithms on various tree data structures in real-time. Designed as the Capstone Project for the IT3100E: Object-Oriented Programming course (Class 162060 - Semester 2025.1) at Hanoi University of Science and Technology (HUST), this tool serves as an educational companion for students and developers mastering data structures.

If you find this project useful for learning Data Structures, please give it a ⭐ on GitHub!

🚀 Features

🌲 Supported Data Structures

• Binary Search Tree (BST): The fundamental tree structure.
• AVL Tree: A self-balancing binary search tree.
• Red-Black Tree: A complex self-balancing structure used in many system libraries.
• Generic Tree (N-ary Tree): A tree where nodes can have an arbitrary number of children.

🛠 Core Operations

• Insert: Add nodes dynamically (supports auto-balancing for AVL/RB Trees).
• Delete: Remove nodes and observe structural repairs.
• Search: Visualize the path taken to find a value.
• Update: Modify node values (visualized as delete + insert for BST variants).
• Predecessor / Successor: Find the in-order predecessor or successor of a node.

🎬 Interactive Animation and Control

• Real-time Rendering: Smooth JavaFX animations for traversals, rotations, and color flips.
• Playback Controls:
  • ▶️ Play / ⏸️ Pause
  • ⏮️ Skip to Start / ⏭️ Skip to End
  • ⏪ Step Backward / ⏩ Step Forward
  • ⚡ Speed Slider (0.1x to 5.0x)
• Timeline Scrubbing: Drag the timeline slider to jump to any point in the operation.

📝 Educational Aids

• Pseudo-code Panel: Displays the algorithm logic side-by-side, highlighting the exact line of code currently executing.
• Tree Statistics: Real-time updates on tree Height, Size, and Leaf count.
• Traversals: Animated Pre-Order, In-Order, and Post-Order traversals.

⚙️ Utilities

• Undo / Redo: Navigate through your entire history of tree states.
• Example Generators: One-click generation of Random, Balanced, Skewed, or Perfect trees.
• Export: Save the current visualization as a transparent PNG image.

🏗 Tech Stack

• Language: Java (JDK 21)
• GUI Framework: JavaFX (Modular architecture)
• Build Tool: Apache Maven
• Design Pattern: MVC (Model-View-Controller)
• Styling: CSS (Modern, flat UI design)

📂 Project Structure

OOP.20251-10
├── .github/
│   └── workflows/
│       └── build.yml                                    # CI/CD pipeline configuration (GitHub Actions)
│
├── design/                                              # Design artifacts (UML Use Case and Class Diagrams)
│                     
├── report/                                              
│   ├── DemoTreeviz.mp4                                  # Demonstration video
│   └── OOPReport.pdf                                    # Final project report
│
├── src/main/
│   ├── java/
│   │   ├── controller/                                  # [Controller Layer] Logic and Animation Orchestration
│   │   │   ├── animation/                               # Animation Strategy implementations
│   │   │   │   ├── BaseAnimationStrategy.java
│   │   │   │   ├── BSTAnimationStrategy.java
│   │   │   │   ├── AVLAnimationStrategy.java
│   │   │   │   ├── RBAnimationStrategy.java
│   │   │   │   ├── GenericTreeAnimationStrategy.java
│   │   │   │   ├── RotationAnimator.java
│   │   │   │   ├── TreeAnimationStrategy.java
│   │   │   │   └── TreeVisualizer.java
│   │   │   │
│   │   │   └── TreeController.java                      # Main bridge between Model and View
│   │   │
│   │   ├── model/                                       # [Model Layer] Core Data Structures
│   │   │   ├── pseudocode/                              # Logic for algorithm step tracking
│   │   │   │   ├── AlgoStep.java
│   │   │   │   └── PseudoCodeData.java
│   │   │   │
│   │   │   ├── AVLTree.java                             # Self-balancing AVL Tree implementation
│   │   │   ├── BinarySearchTree.java                    # Standard BST implementation
│   │   │   ├── GenericTree.java                         # N-ary Tree implementation
│   │   │   ├── RedBlackTree.java                        # Red-Black Tree implementation
│   │   │   ├── Node.java                                # Generic Node entity (data + visual coords)
│   │   │   ├── TraversalStep.java                       # Snapshot for traversal animations
│   │   │   └── TreeOperation.java                       # Interface defining common tree behaviors
│   │   │
│   │   ├── util/                                        # [Utilities] Shared helper classes
│   │   │   ├── ExportImage.java                         # Snapshot generation tool
│   │   │   ├── PseudoCodeLib.java                       # Repository of algorithm text strings
│   │   │   └── TreeGenerator.java                       # Factory for creating random/preset trees
│   │   │
│   │   ├── view/                                        # [View Layer] JavaFX UI Components
│   │   │   ├── AnimatePanel.java                        # Playback controls (Play, Pause, Speed)
│   │   │   ├── CodePanel.java                           # Pseudocode display and highlighting
│   │   │   ├── ControlPanel.java                        # User inputs (Buttons, TextFields)
│   │   │   ├── DrawingPanel.java                        # Main canvas for rendering trees
│   │   │   ├── RightPanel.java                          # Container for Code and Statistics
│   │   │   ├── StatisticPanel.java                      # Metrics display (Height, Size, etc.)
│   │   │   ├── HelpWindow.java                          # Popup for About Us
│   │   │   ├── MainWindow.java                          # Main application layout
│   │   │   └── WelcomeWindow.java                       # Landing screen
│   │   │
│   │   └── demo/                                       
│   │       ├── App.java                                 
│   │       ├── Main.java                                
│   │       └── style.css                                
│   │
│   └── resources/                                       # Static assets (images, backgrounds)
│
├── pom.xml                                              # Maven dependencies and build configuration
├── dependency-reduced-pom.xml                           # Generated by Maven Shade plugin (Build artifact)       
├── icon.ico                                             # Application Icon
├── .gitignore                                           
├── LICENSE                                              
└── README.md                                            

💻 System Requirements

Before installing the application, ensure your system meets the following specifications:

• Operating System: Windows 10/11, macOS 11+, or Linux (Ubuntu 20.04+).
• Java Runtime: JDK 21 or later is required to support modern JavaFX features.
• Build Tool: Apache Maven 3.8+ (required only if building from source).
• Hardware: Minimum 4 GB RAM and 1280x720 display resolution.

🛠 Installation and Setup

There are two ways to install and run the application: building from the source code or downloading the pre-built application via GitHub.

Option 1: Building from Source

This method ensures you have the absolute latest changes and allows for code modification.

Step 1: Clone the repository Open your terminal or command prompt and run:

git clone https://github.com/nvtkienn/OOP.20251-10.git
cd OOP.20251-10

Step 2: Ensure JDK 21 is active

java -version
# Output should indicate version "21" or higher

Step 3: Build the project

mvn clean install

Step 4: Launch the application

mvn javafx:run

Alternatively, you can run the main class from your IDE (IntelliJ/Eclipse) located at: src/main/java/demo/App.java

Option 2: Downloading Pre-built Binaries

If you do not wish to set up a coding environment, you can download the latest executable version generated by our CI/CD pipeline.

• Navigate to the GitHub repository page.

• Click on the Actions tab in the top navigation bar.

• Select the latest workflow run on the main (or release) branch.

• Scroll down to the Artifacts section at the bottom of the workflow page. Download the package suitable for your operating system:

  • TreeVizApp-windows-latest (for Windows .exe)
  • TreeVizApp-macos-latest (for macOS .dmg/.app)
  • TreeVizApp-ubuntu-latest (for Linux .deb/binary)

• Extract the downloaded zip file and double-click the executable to launch.

📖 Usage Guide

• Start: Launch the app and click "Start Visualization".
• Select Mode: Choose your desired Tree Type (e.g., AVL Tree).
• Generate Data:
  • Click Create → Random to generate a random tree.
  • Or use Create → Examples → Perfect AVL for a demo scenario.
• Execute:
  • Type a number in the input box.
  • Click Insert, Delete, or Search.
• Control: Use the bottom animation bar to pause or slow down the animation to understand the logic (e.g., watch how an AVL tree rotates).

👥 Team Members

This project was developed by Team 10.

No.	Member Name	Student ID	Role
1	Nguyễn Vũ Trung Kiên	202416713	Project Lead, Architecture, Refactoring
2	Phạm Tiến Dũng	202416680	UI/UX Design, Animation Logic
3	Trần Nam Hải	202400103	Data Structures, Algorithms

📜 LICENSE

This project is licensed under the MIT License - see the LICENSE file for details. However, it is intended for educational reference and demonstration purposes only.

For Students: If you are currently taking the Object-Oriented Programming (IT3100E) course or similar subjects:

• You may view the code to understand the concepts.
• You MUST NOT copy-paste this source code and submit it as your own coursework.
• Plagiarism is a serious academic offense and is easily detected by university code-checking tools.

🙏 Acknowledgements

We would like to express our sincere gratitude to:

• Ph.D. Nguyen Thi Thu Trang - Our course lecturer.
• Mr. Le Nhat Son - Our teaching assistant.

Their expertise and dedication provided us with the invaluable knowledge required to complete this project.

📞 Contact

For any inquiries or feedback, please contact us via GitHub Issues or LinkedIn:

We highly value your feedback and every contribution to make this project better!