# 3D Wireframe Shapes Visualizer

![ezgif-19d92963ee8272](https://github.com/user-attachments/assets/660b35b2-88aa-4c1f-afa7-688863965406)

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] <br>

✅ Optimized design for phones<br>
✅ Optimized logic for responsive design<be>
<br>
<be>

## 🚀 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](https://p5js.org/) - 3D Rendering & Animation
- [FileSaver.js](https://github.com/eligrey/FileSaver.js/) - File Saving
- [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) - WebM Video Recording

---

## 🔧 Getting Started

1. **Clone this repository**
   ```sh
   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

![drbaph-HD (2)](https://github.com/user-attachments/assets/14ae3a11-7636-40a0-99a4-a57bb412bf4c)

[wireframe-recording (16).webm](https://github.com/user-attachments/assets/2f5a9ef9-4d4f-430d-9a99-4ce3d506884b)

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

![wireframe (8)](https://github.com/user-attachments/assets/046e29aa-aa06-4763-a905-70b1d18553e4)

---

### 🔗 Links
- **Live Demo:** [Live Demo](https://saganaki22.github.io/Drbaph_shapes/)
- **Repository:** [Repository](https://github.com/Saganaki22/Drbaph_shapes)

---