🎨 .matrix - Transform Your Media into Art!

Turn your images and videos into mesmerizing dotted artworks with this sleek web application! Built with pure vanilla JavaScript, this app uniquely transforms your media into stunning dot-matrix-style visuals.

Live Demo

Check out the live demo .Matrix

📸 Preview

asset.5.webm

🎬 Interface

Web Interface	Mobile Interface

🖼️ Image Examples

Original	Dotted Effect

🎥 Video Processing

dotted-effect.2.mp4

✨ Features

• 🖼️ Image Processing: Transform any image into a dynamic dot pattern
• 🎥 Video Effects: Apply the dotted effect to videos in real-time
• 🎮 Interactive Controls:
  • Dot Size: Fine-tune the size of each dot
  • Spacing: Adjust the distance between dots
  • Threshold: Control the intensity of the effect
• 📱 Responsive Design: Works beautifully on all devices
• 🚀 No Dependencies: Pure vanilla JavaScript power!
• 💾 Download Support: Save your creations instantly

🎯 How to Use

1. 📤 Upload Media:

   • Drag and drop your image/video
   • Or click to browse files

2. 🎛️ Customize Effect:

   • Adjust dot size (1-10)
   • Set spacing (4-20)
   • Fine-tune threshold (0-255)

3. 💫 Process & Download:

   • For images: Effect applies instantly
   • For videos: Click "Process Video" and wait for the magic!

🛠️ Technical Details

• Frontend: Vanilla JavaScript, HTML5, CSS3
• Canvas API: For real-time media processing
• MediaRecorder API: For video processing
• File API: For drag & drop functionality

🎭 Effect Parameters

Parameter	Range	Description
Dot Size	1-10	Controls the size of individual dots
Spacing	4-20	Adjusts the gap between dots
Threshold	0-255	Determines the intensity of dot placement

🌟 Key Features

Real-time Preview

Watch your media transform instantly as you adjust the parameters. The live preview ensures you get exactly the look you want.

Smooth Video Processing

• 🎬 Maintains original video quality
• ⚡ Efficient frame-by-frame processing
• 🔄 Progress indicator with animated dots
• ✨ Glowing processing button for visual feedback

Responsive Interface

• 📱 Mobile-friendly design
• 🖥️ Optimized for large screens
• 🎨 Sleek, dark theme
• 💫 Smooth animations

🚀 Performance

• Optimized for smooth performance
• Efficient memory management
• Responsive even with large files
• Smart canvas sizing

🎨 Example Transformations

Before	After
Regular Photo	Artistic Dot Matrix
Standard Video	Dynamic Dotted Animation

💡 Tips

• Higher threshold = More dots
• Smaller spacing = More detail
• Larger dot size = More abstract look
• Try different combinations for unique effects!

🔮 Future Enhancements

• Additional effect patterns
• Color customization
• Effect presets
• Batch processing
• More export options

🤝 Contributing

Feel free to contribute to this project! Whether it's:

• 🐛 Bug fixes
• ✨ New features
• 📚 Documentation
• 🎨 UI improvements

📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

The Apache License 2.0 is a permissive license that allows you to:

• ✅ Use the code commercially
• ✅ Modify the code
• ✅ Distribute any modifications
• ✅ Use patent claims
• ✅ Place warranty
• ℹ️ Requires preservation of copyright and license notices