Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/saganaki22/.matrix

🎨 Transform images and videos into stunning dot-matrix art with this vanilla JavaScript web app. Features real-time preview, customizable effects, and video processing. No dependencies, pure magic! ✨
https://github.com/saganaki22/.matrix

canvas-api creative-coding dot-matrix image-processing javascript media-processing no-dependencies vanilla-js video-effects web-app

Last synced: about 9 hours ago
JSON representation

Host: GitHub
URL: https://github.com/saganaki22/.matrix
Owner: Saganaki22
License: apache-2.0
Created: 2025-02-11T02:56:33.000Z (about 16 hours ago)
Default Branch: main
Last Pushed: 2025-02-11T04:55:24.000Z (about 14 hours ago)
Last Synced: 2025-02-11T05:22:38.349Z (about 14 hours ago)
Topics: canvas-api, creative-coding, dot-matrix, image-processing, javascript, media-processing, no-dependencies, vanilla-js, video-effects, web-app
Language: JavaScript
Homepage: https://saganaki22.github.io/.matrix/
Size: 14.3 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 🎨 .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](https://saganaki22.github.io/.matrix/)

## 📸 Preview

[asset (5).webm](https://github.com/user-attachments/assets/a8505160-608d-4370-a076-29eba640bd68)

### 🎬 Interface
| Web Interface | Mobile Interface |
|----------|---------------|
|![Web Interface Preview](assets/asset%20(1).png) | ![Mobile Interface Preview](assets/asset%20(2).png) |

### 🖼️ Image Examples
| Original | Dotted Effect |
|----------|---------------|
| ![Original Image](assets/asset%20(5).png) | ![Dotted Effect](assets/asset%20(4).png) |

### 🎥 Video Processing

https://github.com/user-attachments/assets/620ab1bf-1776-448e-9f4a-16f77a2d7c20

## ✨ 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](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