mirror of
https://github.com/Solido/mixbox.git
synced 2026-03-19 22:50:54 +01:00
271 lines
6.8 KiB
Markdown
271 lines
6.8 KiB
Markdown
# Mixbox pour Dart/Flutter
|
||
|
||
<p align="center">
|
||
<img src="https://scrtwpns.com/mixbox/teaser.jpg"/>
|
||
</p>
|
||
|
||
Implémentation Dart de **Mixbox 2.0** - mélange de couleurs physiquement réaliste simulant le comportement des pigments réels.
|
||
|
||
## 🎨 Pourquoi Mixbox ?
|
||
|
||
Le mélange RGB classique produit des couleurs ternes :
|
||
- **Jaune + Bleu = Gris** ❌ (en RGB)
|
||
- **Jaune + Bleu = Vert** ✅ (avec Mixbox)
|
||
|
||
Mixbox simule le comportement physique des pigments pour des résultats naturels.
|
||
|
||
## 📦 Installation
|
||
|
||
### 1. Ajoutez les fichiers
|
||
|
||
```
|
||
lib/
|
||
mixbox/
|
||
mixbox.dart
|
||
mixbox_loader.dart
|
||
assets/
|
||
mixbox_lut.dat
|
||
```
|
||
|
||
### 2. Dépendances dans `pubspec.yaml`
|
||
|
||
```yaml
|
||
dependencies:
|
||
flutter:
|
||
sdk: flutter
|
||
archive: ^3.4.0
|
||
|
||
flutter:
|
||
assets:
|
||
- assets/mixbox_lut.dat
|
||
```
|
||
|
||
### 3. Téléchargez la LUT
|
||
|
||
Le fichier `mixbox_lut.dat` doit être téléchargé depuis :
|
||
- **Source officielle**: https://github.com/scrtwpns/mixbox
|
||
- Placez-le dans `assets/mixbox_lut.dat`
|
||
|
||
> ⚠️ **Important**: Sans la LUT, Mixbox ne fonctionnera pas correctement.
|
||
|
||
## 🚀 Utilisation
|
||
|
||
### Initialisation (une fois au démarrage)
|
||
|
||
```dart
|
||
import 'mixbox_loader.dart';
|
||
|
||
void main() async {
|
||
WidgetsFlutterBinding.ensureInitialized();
|
||
|
||
// Chargement de la LUT
|
||
await MixboxLoader.initializeFromAsset('assets/mixbox_lut.dat');
|
||
|
||
runApp(MyApp());
|
||
}
|
||
```
|
||
|
||
### Mélange simple (2 couleurs)
|
||
|
||
```dart
|
||
import 'package:flutter/material.dart';
|
||
import 'mixbox.dart';
|
||
import 'mixbox_loader.dart';
|
||
|
||
// Extension pour faciliter l'usage avec Flutter Color
|
||
final yellow = Color(0xFFFEEC00);
|
||
final blue = Color(0xFF190059);
|
||
|
||
final green = yellow.mixWith(blue, 0.5); // 50% de chaque
|
||
```
|
||
|
||
### Mélange multi-couleurs (3+)
|
||
|
||
```dart
|
||
final red = Color(0xFFFF2702);
|
||
final yellow = Color(0xFFFCD300);
|
||
final blue = Color(0xFF0D1B44);
|
||
|
||
// Conversion en espace latent
|
||
final z1 = Mixbox.rgbToLatent(red.toMixboxInt());
|
||
final z2 = Mixbox.rgbToLatent(yellow.toMixboxInt());
|
||
final z3 = Mixbox.rgbToLatent(blue.toMixboxInt());
|
||
|
||
// Mélange personnalisé
|
||
final zMix = List.generate(
|
||
Mixbox.latentSize,
|
||
(i) => 0.4 * z1[i] + 0.3 * z2[i] + 0.3 * z3[i],
|
||
);
|
||
|
||
final mixed = Color(Mixbox.latentToRgb(zMix));
|
||
```
|
||
|
||
### Gradient physiquement correct
|
||
|
||
```dart
|
||
final gradient = List.generate(
|
||
10,
|
||
(i) => yellow.mixWith(blue, i / 9.0),
|
||
);
|
||
```
|
||
|
||
## 🎨 Couleurs Pigments Prédéfinies
|
||
|
||
Utilisez ces couleurs pour des résultats réalistes :
|
||
|
||
```dart
|
||
const cadmiumYellow = Color(0xFFFEEC00); // Jaune cadmium
|
||
const hansaYellow = Color(0xFFFCD300); // Jaune Hansa
|
||
const cadmiumOrange = Color(0xFFFF6900); // Orange cadmium
|
||
const cadmiumRed = Color(0xFFFF2702); // Rouge cadmium
|
||
const quinacridoneMagenta = Color(0xFF80022E); // Magenta quinacridone
|
||
const cobaltViolet = Color(0xFF4E0042); // Violet cobalt
|
||
const ultramarineBlue = Color(0xFF190059); // Bleu outremer
|
||
const cobaltBlue = Color(0xFF002185); // Bleu cobalt
|
||
const phthaloBlue = Color(0xFF0D1B44); // Bleu phthalo
|
||
const phthaloGreen = Color(0xFF003C32); // Vert phthalo
|
||
const permanentGreen = Color(0xFF076D16); // Vert permanent
|
||
const sapGreen = Color(0xFF6B9404); // Vert sève
|
||
const burntSienna = Color(0xFF7B4800); // Terre de Sienne brûlée
|
||
```
|
||
|
||
## 📊 API Complète
|
||
|
||
### Méthodes principales
|
||
|
||
```dart
|
||
// Mélange int (0xAARRGGBB)
|
||
int Mixbox.lerp(int color1, int color2, double t)
|
||
|
||
// Mélange liste [r, g, b] ou [r, g, b, a] (0-255)
|
||
List<int> Mixbox.lerpList(List<int> color1, List<int> color2, double t)
|
||
|
||
// Mélange float [r, g, b] ou [r, g, b, a] (0.0-1.0)
|
||
List<double> Mixbox.lerpFloat(List<double> color1, List<double> color2, double t)
|
||
|
||
// Mélange RGB linéaire (pour rendu 3D)
|
||
List<double> Mixbox.lerpLinearFloat(List<double> color1, List<double> color2, double t)
|
||
```
|
||
|
||
### Conversions
|
||
|
||
```dart
|
||
// RGB → Latent
|
||
List<double> Mixbox.rgbToLatent(int color)
|
||
List<double> Mixbox.floatRgbToLatent(double r, double g, double b)
|
||
|
||
// Latent → RGB
|
||
int Mixbox.latentToRgb(List<double> latent)
|
||
List<double> Mixbox.latentToFloatRgb(List<double> latent)
|
||
```
|
||
|
||
## 🧪 Exemple Complet
|
||
|
||
```dart
|
||
import 'package:flutter/material.dart';
|
||
import 'mixbox.dart';
|
||
import 'mixbox_loader.dart';
|
||
|
||
void main() async {
|
||
WidgetsFlutterBinding.ensureInitialized();
|
||
await MixboxLoader.initializeFromAsset('assets/mixbox_lut.dat');
|
||
runApp(const MyApp());
|
||
}
|
||
|
||
class MyApp extends StatefulWidget {
|
||
const MyApp({super.key});
|
||
|
||
@override
|
||
State<MyApp> createState() => _MyAppState();
|
||
}
|
||
|
||
class _MyAppState extends State<MyApp> {
|
||
double _mix = 0.5;
|
||
|
||
final _yellow = const Color(0xFFFEEC00);
|
||
final _blue = const Color(0xFF190059);
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final mixed = _yellow.mixWith(_blue, _mix);
|
||
|
||
return MaterialApp(
|
||
home: Scaffold(
|
||
appBar: AppBar(title: const Text('Mixbox Demo')),
|
||
body: Column(
|
||
children: [
|
||
Container(height: 200, color: mixed),
|
||
Slider(
|
||
value: _mix,
|
||
onChanged: (v) => setState(() => _mix = v),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
## ⚙️ Configuration Avancée
|
||
|
||
### Sans la LUT (Tests uniquement)
|
||
|
||
```dart
|
||
// Génère une approximation (NON recommandé en production)
|
||
final testLut = MixboxLoader.generateTestLut();
|
||
Mixbox.initialize(testLut);
|
||
```
|
||
|
||
### Espace Linéaire (Rendu 3D)
|
||
|
||
Pour shaders/rendu 3D, utilisez l'espace linéaire :
|
||
|
||
```dart
|
||
final color1Linear = [1.0, 0.5, 0.0]; // RGB linéaire
|
||
final color2Linear = [0.0, 0.2, 1.0];
|
||
|
||
final mixed = Mixbox.lerpLinearFloat(color1Linear, color2Linear, 0.5);
|
||
```
|
||
|
||
## 📝 Licence
|
||
|
||
**Creative Commons Attribution-NonCommercial 4.0**
|
||
|
||
- ✅ Usage non-commercial gratuit
|
||
- ❌ Usage commercial nécessite une licence
|
||
- Contact: mixbox@scrtwpns.com
|
||
|
||
## 🔗 Ressources
|
||
|
||
- **Site officiel**: https://scrtwpns.com/mixbox
|
||
- **Paper**: https://scrtwpns.com/mixbox.pdf
|
||
- **GitHub**: https://github.com/scrtwpns/mixbox
|
||
- **Démo interactive**: https://scrtwpns.com/mixbox/painter/
|
||
|
||
## ❓ FAQ
|
||
|
||
**Q: Pourquoi la LUT est nécessaire ?**
|
||
R: Elle contient les données pré-calculées du modèle physique des pigments (64×64×64 = 262,144 valeurs).
|
||
|
||
**Q: Puis-je utiliser sans la LUT ?**
|
||
R: Non pour des résultats corrects. La fonction `generateTestLut()` est juste pour les tests rapides.
|
||
|
||
**Q: Performances ?**
|
||
R: Très rapide (~1μs par mélange). L'interpolation trilinéaire est optimisée.
|
||
|
||
**Q: Différence avec HSV/HSL ?**
|
||
R: HSV/HSL sont des transformations mathématiques. Mixbox simule la physique réelle des pigments.
|
||
|
||
**Q: Ça marche pour l'animation ?**
|
||
R: Oui ! Parfait pour les gradients, transitions, et animations fluides.
|
||
|
||
## 🎯 Cas d'Usage
|
||
|
||
- 🎨 Applications de dessin/peinture
|
||
- 🌈 Gradients naturels
|
||
- 🎬 Outils de création de contenu
|
||
- 🎮 Systèmes de couleurs dans les jeux
|
||
- 🖼️ Filtres photo réalistes
|
||
- 📊 Visualisations de données
|