Mixbox/mixbox_flutter
1
0
Fork 0
mirror of https://github.com/Solido/mixbox.git synced 2026-03-19 22:50:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

README update and FR

Browse Source
This commit is contained in:
Robert Felker
2026-02-10 17:19:10 +01:00
parent adee1529b0
commit a882d1dc08
2 changed files with 345 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
README.FR.md Normal file
View File

@@ -0,0 +1,270 @@
# 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

150
README.md
View File

@@ -1,22 +1,22 @@
# Mixbox pour Dart/Flutter # Mixbox for Dart/Flutter
<p align="center"> <p align="center">
<img src="https://scrtwpns.com/mixbox/teaser.jpg"/> <img src="https://scrtwpns.com/mixbox/teaser.jpg"/>
</p> </p>
Implémentation Dart de **Mixbox 2.0** - mélange de couleurs physiquement réaliste simulant le comportement des pigments réels. Dart implementation of **Mixbox 2.0** - physically realistic color mixing simulating real pigment behavior.
## 🎨 Pourquoi Mixbox ? ## 🎨 Why Mixbox?
Le mélange RGB classique produit des couleurs ternes : Classic RGB mixing produces dull colors:
- **Jaune + Bleu = Gris** ❌ (en RGB) - **Yellow + Blue = Gray** ❌ (in RGB)
- **Jaune + Bleu = Vert** ✅ (avec Mixbox) - **Yellow + Blue = Green** ✅ (with Mixbox)
Mixbox simule le comportement physique des pigments pour des résultats naturels. Mixbox simulates physical pigment behavior for natural results.
## 📦 Installation ## 📦 Installation
### 1. Ajoutez les fichiers ### 1. Add the files
``` ```
lib/ lib/
@@ -27,7 +27,7 @@ assets/
mixbox_lut.dat mixbox_lut.dat
``` ```
### 2. Dépendances dans `pubspec.yaml` ### 2. Dependencies in `pubspec.yaml`
```yaml ```yaml
dependencies: dependencies:
@@ -40,17 +40,17 @@ flutter:
- assets/mixbox_lut.dat - assets/mixbox_lut.dat
``` ```
### 3. Téléchargez la LUT ### 3. Download the LUT
Le fichier `mixbox_lut.dat` doit être téléchargé depuis : The `mixbox_lut.dat` file must be downloaded from:
- **Source officielle**: https://github.com/scrtwpns/mixbox - **Official source**: https://github.com/scrtwpns/mixbox
- Placez-le dans `assets/mixbox_lut.dat` - Place it in `assets/mixbox_lut.dat`
> ⚠️ **Important**: Sans la LUT, Mixbox ne fonctionnera pas correctement. > ⚠️ **Important**: Without the LUT, Mixbox won't work properly.
## 🚀 Utilisation ## 🚀 Usage
### Initialisation (une fois au démarrage) ### Initialization (once at startup)
```dart ```dart
import 'mixbox_loader.dart'; import 'mixbox_loader.dart';
@@ -58,40 +58,40 @@ import 'mixbox_loader.dart';
void main() async { void main() async {
WidgetsFlutterBinding.ensureInitialized(); WidgetsFlutterBinding.ensureInitialized();
// Chargement de la LUT // Load the LUT
await MixboxLoader.initializeFromAsset('assets/mixbox_lut.dat'); await MixboxLoader.initializeFromAsset('assets/mixbox_lut.dat');
runApp(MyApp()); runApp(MyApp());
} }
``` ```
### Mélange simple (2 couleurs) ### Simple mixing (2 colors)
```dart ```dart
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'mixbox.dart'; import 'mixbox.dart';
import 'mixbox_loader.dart'; import 'mixbox_loader.dart';
// Extension pour faciliter l'usage avec Flutter Color // Extension for easy use with Flutter Color
final yellow = Color(0xFFFEEC00); final yellow = Color(0xFFFEEC00);
final blue = Color(0xFF190059); final blue = Color(0xFF190059);
final green = yellow.mixWith(blue, 0.5); // 50% de chaque final green = yellow.mixWith(blue, 0.5); // 50% of each
``` ```
### Mélange multi-couleurs (3+) ### Multi-color mixing (3+)
```dart ```dart
final red = Color(0xFFFF2702); final red = Color(0xFFFF2702);
final yellow = Color(0xFFFCD300); final yellow = Color(0xFFFCD300);
final blue = Color(0xFF0D1B44); final blue = Color(0xFF0D1B44);
// Conversion en espace latent // Convert to latent space
final z1 = Mixbox.rgbToLatent(red.toMixboxInt()); final z1 = Mixbox.rgbToLatent(red.toMixboxInt());
final z2 = Mixbox.rgbToLatent(yellow.toMixboxInt()); final z2 = Mixbox.rgbToLatent(yellow.toMixboxInt());
final z3 = Mixbox.rgbToLatent(blue.toMixboxInt()); final z3 = Mixbox.rgbToLatent(blue.toMixboxInt());
// Mélange personnalisé // Custom mixing
final zMix = List.generate( final zMix = List.generate(
Mixbox.latentSize, Mixbox.latentSize,
(i) => 0.4 * z1[i] + 0.3 * z2[i] + 0.3 * z3[i], (i) => 0.4 * z1[i] + 0.3 * z2[i] + 0.3 * z3[i],
@@ -100,7 +100,7 @@ final zMix = List.generate(
final mixed = Color(Mixbox.latentToRgb(zMix)); final mixed = Color(Mixbox.latentToRgb(zMix));
``` ```
### Gradient physiquement correct ### Physically correct gradient
```dart ```dart
final gradient = List.generate( final gradient = List.generate(
@@ -109,41 +109,41 @@ final gradient = List.generate(
); );
``` ```
## 🎨 Couleurs Pigments Prédéfinies ## 🎨 Predefined Pigment Colors
Utilisez ces couleurs pour des résultats réalistes : Use these colors for realistic results:
```dart ```dart
const cadmiumYellow = Color(0xFFFEEC00); // Jaune cadmium const cadmiumYellow = Color(0xFFFEEC00); // Cadmium yellow
const hansaYellow = Color(0xFFFCD300); // Jaune Hansa const hansaYellow = Color(0xFFFCD300); // Hansa yellow
const cadmiumOrange = Color(0xFFFF6900); // Orange cadmium const cadmiumOrange = Color(0xFFFF6900); // Cadmium orange
const cadmiumRed = Color(0xFFFF2702); // Rouge cadmium const cadmiumRed = Color(0xFFFF2702); // Cadmium red
const quinacridoneMagenta = Color(0xFF80022E); // Magenta quinacridone const quinacridoneMagenta = Color(0xFF80022E); // Quinacridone magenta
const cobaltViolet = Color(0xFF4E0042); // Violet cobalt const cobaltViolet = Color(0xFF4E0042); // Cobalt violet
const ultramarineBlue = Color(0xFF190059); // Bleu outremer const ultramarineBlue = Color(0xFF190059); // Ultramarine blue
const cobaltBlue = Color(0xFF002185); // Bleu cobalt const cobaltBlue = Color(0xFF002185); // Cobalt blue
const phthaloBlue = Color(0xFF0D1B44); // Bleu phthalo const phthaloBlue = Color(0xFF0D1B44); // Phthalo blue
const phthaloGreen = Color(0xFF003C32); // Vert phthalo const phthaloGreen = Color(0xFF003C32); // Phthalo green
const permanentGreen = Color(0xFF076D16); // Vert permanent const permanentGreen = Color(0xFF076D16); // Permanent green
const sapGreen = Color(0xFF6B9404); // Vert sève const sapGreen = Color(0xFF6B9404); // Sap green
const burntSienna = Color(0xFF7B4800); // Terre de Sienne brûlée const burntSienna = Color(0xFF7B4800); // Burnt sienna
``` ```
## 📊 API Complète ## 📊 Complete API
### Méthodes principales ### Main methods
```dart ```dart
// Mélange int (0xAARRGGBB) // Mix int (0xAARRGGBB)
int Mixbox.lerp(int color1, int color2, double t) int Mixbox.lerp(int color1, int color2, double t)
// Mélange liste [r, g, b] ou [r, g, b, a] (0-255) // Mix list [r, g, b] or [r, g, b, a] (0-255)
List<int> Mixbox.lerpList(List<int> color1, List<int> color2, double t) 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) // Mix float [r, g, b] or [r, g, b, a] (0.0-1.0)
List<double> Mixbox.lerpFloat(List<double> color1, List<double> color2, double t) List<double> Mixbox.lerpFloat(List<double> color1, List<double> color2, double t)
// Mélange RGB linéaire (pour rendu 3D) // Mix linear RGB (for 3D rendering)
List<double> Mixbox.lerpLinearFloat(List<double> color1, List<double> color2, double t) List<double> Mixbox.lerpLinearFloat(List<double> color1, List<double> color2, double t)
``` ```
@@ -159,7 +159,7 @@ int Mixbox.latentToRgb(List<double> latent)
List<double> Mixbox.latentToFloatRgb(List<double> latent) List<double> Mixbox.latentToFloatRgb(List<double> latent)
``` ```
## 🧪 Exemple Complet ## 🧪 Complete Example
```dart ```dart
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@@ -207,64 +207,64 @@ class _MyAppState extends State<MyApp> {
} }
``` ```
## ⚙️ Configuration Avancée ## ⚙️ Advanced Configuration
### Sans la LUT (Tests uniquement) ### Without the LUT (Testing only)
```dart ```dart
// Génère une approximation (NON recommandé en production) // Generates an approximation (NOT recommended in production)
final testLut = MixboxLoader.generateTestLut(); final testLut = MixboxLoader.generateTestLut();
Mixbox.initialize(testLut); Mixbox.initialize(testLut);
``` ```
### Espace Linéaire (Rendu 3D) ### Linear Space (3D Rendering)
Pour shaders/rendu 3D, utilisez l'espace linéaire : For shaders/3D rendering, use linear space:
```dart ```dart
final color1Linear = [1.0, 0.5, 0.0]; // RGB linéaire final color1Linear = [1.0, 0.5, 0.0]; // Linear RGB
final color2Linear = [0.0, 0.2, 1.0]; final color2Linear = [0.0, 0.2, 1.0];
final mixed = Mixbox.lerpLinearFloat(color1Linear, color2Linear, 0.5); final mixed = Mixbox.lerpLinearFloat(color1Linear, color2Linear, 0.5);
``` ```
## 📝 Licence ## 📝 License
**Creative Commons Attribution-NonCommercial 4.0** **Creative Commons Attribution-NonCommercial 4.0**
- ✅ Usage non-commercial gratuit - ✅ Free non-commercial use
- ❌ Usage commercial nécessite une licence - ❌ Commercial use requires license
- Contact: mixbox@scrtwpns.com - Contact: mixbox@scrtwpns.com
## 🔗 Ressources ## 🔗 Resources
- **Site officiel**: https://scrtwpns.com/mixbox - **Official website**: https://scrtwpns.com/mixbox
- **Paper**: https://scrtwpns.com/mixbox.pdf - **Paper**: https://scrtwpns.com/mixbox.pdf
- **GitHub**: https://github.com/scrtwpns/mixbox - **GitHub**: https://github.com/scrtwpns/mixbox
- **Démo interactive**: https://scrtwpns.com/mixbox/painter/ - **Interactive demo**: https://scrtwpns.com/mixbox/painter/
## ❓ FAQ ## ❓ FAQ
**Q: Pourquoi la LUT est nécessaire ?** **Q: Why is the LUT necessary?**
R: Elle contient les données pré-calculées du modèle physique des pigments (64×64×64 = 262,144 valeurs). A: It contains pre-calculated data from the physical pigment model (64×64×64 = 262,144 values).
**Q: Puis-je utiliser sans la LUT ?** **Q: Can I use it without the LUT?**
R: Non pour des résultats corrects. La fonction `generateTestLut()` est juste pour les tests rapides. A: No for correct results. The `generateTestLut()` function is just for quick testing.
**Q: Performances ?** **Q: Performance?**
R: Très rapide (~1μs par mélange). L'interpolation trilinéaire est optimisée. A: Very fast (~1μs per mix). Trilinear interpolation is optimized.
**Q: Différence avec HSV/HSL ?** **Q: Difference with HSV/HSL?**
R: HSV/HSL sont des transformations mathématiques. Mixbox simule la physique réelle des pigments. A: HSV/HSL are mathematical transformations. Mixbox simulates real pigment physics.
**Q: Ça marche pour l'animation ?** **Q: Does it work for animation?**
R: Oui ! Parfait pour les gradients, transitions, et animations fluides. A: Yes! Perfect for gradients, transitions, and smooth animations.
## 🎯 Cas d'Usage ## 🎯 Use Cases
- 🎨 Applications de dessin/peinture - 🎨 Drawing/painting applications
- 🌈 Gradients naturels - 🌈 Natural gradients
- 🎬 Outils de création de contenu - 🎬 Content creation tools
- 🎮 Systèmes de couleurs dans les jeux - 🎮 Game color systems
- 🖼️ Filtres photo réalistes - 🖼️ Realistic photo filters
- 📊 Visualisations de données - 📊 Data visualizations