Mixbox pour Dart/Flutter

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

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)

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)

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+)

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

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 :

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

// 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

// 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

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)

// 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 :

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