3D Wireframe Shapes Visualizer

An interactive web-based 3D shape visualization tool that renders various geometric shapes in a wireframe style with a dynamic matrix background effect.

---

📝Updates (0.2)

[09/02/2025]

✅ Optimized design for phones ✅ Optimized logic for responsive design

🚀 Features

🎨 Multiple 3D Shapes

• Basic Shapes: Cube, Sphere, Cone, Cylinder
• Complex Shapes: Torus, Triangular Pyramid, Hexagonal Prism, Icosahedron
• Mathematical Surfaces: Schwarz Surface, Gyroid Surface, Hyperboloid, Möbius Strip

🕹️ Interactive Controls

• Rotation Control: X, Y, Z axes
• Scale Adjustment
• Animation Speed
• Line Thickness & Color
• Background Color & Density
• Auto-Rotation Toggle
• Grid Display Option

📦 Export Capabilities

• Save as PNG Image
• Record animations as WebM Video

🖥️ Additional Features

• Fullscreen Mode Support
• Dynamic Matrix-Style intro
• Animated Node Background
• Responsive Design

---

🛠️ Technologies Used

• p5.js - 3D Rendering & Animation
• FileSaver.js - File Saving
• MediaRecorder API - WebM Video Recording

---

🔧 Getting Started

1. Clone this repository

   git clone https://github.com/Saganaki22/Drbaph_shapes
   

2. Open index.html in a modern web browser
3. 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

---

🎮 Controls

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

---

🌍 Browser Compatibility

✅ Best in modern browsers supporting WebGL & HTML5 Canvas

---

📜 License

This project is available under the Apache License 2.0.

---

📷 Examples

wireframe-recording (16).webm

https://github.com/user-attachments/assets/bbec472e-f12f-4af0-9fca-01491c479e5c

---

🔗 Links

• Live Demo: Live Demo
• Repository: Repository

---