Project Creative Apps (GitHub Copilot) - Tetrahedral Number 3D Visualizer

Track

Creative Apps (GitHub Copilot)

Project Name

Tetrahedral Number 3D Visualizer

GitHub Username

@jdbsolution

Repository URL

https://github.com/jdbsolution/TetraViz

Project Description

What is this app for?

This application allows you to explore and visualize Tetrahedral Numbers (3D pyramidal structures) and their relationship to Triangular Numbers (2D planar structures).
A tetrahedral number represents a pyramid with a triangular base and three sides, constructed out of individual spheres. The nth tetrahedral number is the sum of the first n triangular numbers.

Key Features:

• Interactive 3D Visualization: Render the base tetrahedral structure up to size n = 10 using Three.js inside an orbitable workspace.
• Layer Inspection Engine: Using the k slider, instantly highlight an isolated k-th planar slice, dimming the rest of the 3D model to see exactly how individual triangular numbers stack up to form the overall tetrahedral pyramid.
• 2D Layer View: A dynamically animated SVG viewport strictly breaks down the highlighted 3D slice back into its perfect 2D Triangular Number representation.
• Camera Presets: Examine the structure natively using exact geometric normal viewpoints (ISO, Top, Faces, Base).
• Export Ready: In-app features for saving still .png screenshots or high-quality .webm orbital 360-degree animations directly to your machine.
• Theming: Quick toggle between Dark and Light rendering modes.

Demo Video or Screenshots

Screenshot
https://github.com/jdbsolution/TetraViz/blob/main/Screenshot%202026-02-28%20143833.png

Live Demo
https://jdbsolution.github.io/TetraViz/

Primary Programming Language

TypeScript/JavaScript

Key Technologies Used

• Three.js – 3D rendering and sphere geometry
• SVG + SMIL – 2D layer visualization with inline animations
• MediaRecorder API – WebM video export of 360° rotations
• CSS Custom Properties – Runtime light/dark theme switching

Submission Type

Individual

Team Members

No response

Submission Requirements

• My project meets the track-specific challenge requirements
• My repository includes a comprehensive README.md with setup instructions
• My code does not contain hardcoded API keys or secrets
• I have included demo materials (video or screenshots)
• My project is my own work with proper attribution for any third-party code
• I agree to the Code of Conduct
• I have read and agree to the Disclaimer
• My submission does NOT contain any confidential, proprietary, or sensitive information
• I confirm I have the rights to submit this content and grant the necessary licenses

Quick Setup Summary

Running the Project

Since it is a 100% self-contained application, you can simply open the index.html file in any modern web browser or run it using a local development server of your choice!

Technical Highlights

Built an interactive 3D visualizer to help users intuitively understand abstract tetrahedral numbers through spatial representation.

Challenges & Learnings

No response

Contact Information

https://medium.com/@davidlfliang

Country/Region

Australia

The issue points to the external TetraViz repository and mentions its README.md, index.html, and live demo; start by reading the README and opening index.html or the demo. It describes an existing visualizer but names no change or acceptance criteria, so completion cannot be determined from this issue.