An interactive web-based 3D shape visualization tool that renders various geometric shapes in a wireframe style with a dynamic matrix background effect.
[09/02/2025]
✅ Optimized design for phones
✅ Optimized logic for responsive design
- Basic Shapes: Cube, Sphere, Cone, Cylinder
- Complex Shapes: Torus, Triangular Pyramid, Hexagonal Prism, Icosahedron
- Mathematical Surfaces: Schwarz Surface, Gyroid Surface, Hyperboloid, Möbius Strip
- Rotation Control: X, Y, Z axes
- Scale Adjustment
- Animation Speed
- Line Thickness & Color
- Background Color & Density
- Auto-Rotation Toggle
- Grid Display Option
- Save as PNG Image
- Record animations as WebM Video
- Fullscreen Mode Support
- Dynamic Matrix-Style intro
- Animated Node Background
- Responsive Design
- p5.js - 3D Rendering & Animation
- FileSaver.js - File Saving
- MediaRecorder API - WebM Video Recording
- Clone this repository
git clone /~https://github.com/Saganaki22/Drbaph_shapes
- Open
index.htmlin a modern web browser - Use the control panel to:
- Select different shapes
- Adjust rotation, scale, and animation
- Customize colors & visual settings
- Toggle auto-rotation and grid display
- Export your creations
| Control | Function |
|---|---|
| Shape Selection | Choose from various 3D shapes |
| Rotation | Control X, Y, and Z axes |
| Scale | Adjust shape size |
| Animation Speed | Control animation speed |
| Line Thickness | Adjust wireframe thickness |
| Colors | Customize lines & background |
| Background Settings | Adjust matrix background density & speed |
| Auto Rotate | Toggle automatic rotation |
| Grid Display | Toggle grid visibility |
| Export | Save as image or record animation |
✅ Best in modern browsers supporting WebGL & HTML5 Canvas
This project is available under the Apache License 2.0.
wireframe-recording.16.webm
matrix-animation.mp4
- Live Demo: Live Demo
- Repository: Repository