【Color Matrix】Flutter画像処理入門：行列計算とBT.709輝度係数で実現するダイナミック色相アニメーション【Hue Rotation】

class ColorFilterGenerator {
  static List<double> hueAdjustMatrix(double degrees) {
    // 角度をラジアンに変換
    final value = degrees * pi / 180.0;
    final cosVal = cos(value);
    final sinVal = sin(value);

    // 輝度係数 (BT.709の近似値)
    const double lumR = 0.213;
    const double lumG = 0.715;
    const double lumB = 0.072;

    // YCbCr変換から派生する定数（輝度ベース行列係数）
    const double lumMatrixCoefficient1 = 0.143; 
    const double lumMatrixCoefficient2 = 0.140; 
    const double lumMatrixCoefficient3 = -0.283;

    // 色相回転マトリックスの20要素を定義
    return <double>[
      // R' = R行
      (lumR + cosVal  (1 - lumR) + sinVal  (-lumR)), // m11 (R->R)
      (lumG + cosVal  (-lumG) + sinVal  (-lumG)), // m12 (G->R)
      (lumB + cosVal  (-lumB) + sinVal  (1 - lumB)), // m13 (B->R)
      0, 0, // m14 (A), m15 (Bias)

      // G' = G行
      (lumR + cosVal  (-lumR) + sinVal  lumMatrixCoefficient1), // m21 (R->G)
      (lumG + cosVal  (1 - lumG) + sinVal  lumMatrixCoefficient2), // m22 (G->G)
      (lumB + cosVal  (-lumB) + sinVal  lumMatrixCoefficient3), // m23 (B->G)
      0, 0, // m24 (A), m25 (Bias)

      // B' = B行
      (lumR + cosVal  (-lumR) + sinVal  (-(1 - lumR))), // m31 (R->B)
      (lumG + cosVal  (-lumG) + sinVal  lumG), // m32 (G->B)
      (lumB + cosVal  (1 - lumB) + sinVal  lumB), // m33 (B->B)
      0, 0, // m34 (A), m35 (Bias)

      // A' = A行（不変）
      0, 0, 0, 1, 0, // A' = A
    ];
  }
}

Copy

// HueRotationImage ウィジェットの build メソッド抜粋
class _HueRotationImageState extends State<HueRotationImage> {
  // ... (initState, didUpdateWidgetの省略)

  @override
  Widget build(BuildContext context) {
    return ColorFiltered(
      // (1) ColorFilter.matrixでColorMatrixを渡す
      colorFilter: ColorFilter.matrix(
        ColorFilterGenerator.hueAdjustMatrix(widget.hueShift),
      ),
      child: Image(
        // (2) フィルターを適用したいImageウィジェット
        image: _imageProvider,
        // ... (サイズ、ローディング処理などの省略)
      ),
    );
  }
}

Copy

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 5), // 5秒で一周（360度）
  )..addListener(_handleAnimationUpdate); // (1)
}

Copy

void _handleAnimationUpdate() {
    if (_isAutoRotating) {
        setState(() {
            // (1) Controllerの0.0〜1.0の値を0〜360度にマッピング
            currentHue = controller.value * 360;
        });
    }
}

Copy

void _toggleAutoRotation() {
    setState(() {
      isAutoRotating = !isAutoRotating;
    });

    if (_isAutoRotating) {
      _controller.repeat(); // アニメーションを繰り返し実行
    } else {
      _controller.stop(); // アニメーションを停止
    }
}

Copy

// build メソッド抜粋
HueRotationImage(
  hueShift: _currentHue, // 連続的に変化する角度を渡す
  imagePath: 'assets/bema.png',
  // ...
),

Copy

import 'package:flutter/material.dart';
import 'package:hue_rotation_sample/utils/color_filter_generator.dart';

class HueRotationImage extends StatefulWidget {
  final double hueShift;
  final String imagePath;
  final double width;
  final double height;
  final BoxFit fit;

  const HueRotationImage({
    super.key,
    required this.hueShift,
    required this.imagePath,
    this.width = 250,
    this.height = 250,
    this.fit = BoxFit.contain,
  });

  @override
  State<HueRotationImage> createState() => _HueRotationImageState();
}

class _HueRotationImageState extends State<HueRotationImage> {
  late ImageProvider _imageProvider;

  @override
  void initState() {
    super.initState();
    _imageProvider = AssetImage(widget.imagePath);
  }

  @override
  void didUpdateWidget(covariant HueRotationImage oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.imagePath != widget.imagePath) {
      _imageProvider = AssetImage(widget.imagePath);
    }
  }

  @override
  Widget build(BuildContext context) {
    return ColorFiltered(
      colorFilter: ColorFilter.matrix(
        ColorFilterGenerator.hueAdjustMatrix(widget.hueShift),
      ),
      child: Image(
        image: _imageProvider,
        width: widget.width,
        height: widget.height,
        fit: widget.fit,
        errorBuilder:
            (context, error, stackTrace) => const Text('Error loading image'),
        loadingBuilder:
            (context, child, loadingProgress) =>
                loadingProgress == null
                    ? child
                    : const SizedBox(
                      width: 50,
                      height: 50,
                      child: Center(child: CircularProgressIndicator()),
                    ),
      ),
    );
  }
}

Copy

import 'package:flutter/material.dart';

class AutoRotationToggle extends StatelessWidget {
  final bool isAutoRotating;
  final VoidCallback onToggle;

  const AutoRotationToggle({
    super.key,
    required this.isAutoRotating,
    required this.onToggle,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: DecoratedBox(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Auto Hue Rotation'),
            const SizedBox(width: 8),
            Switch(
              value: isAutoRotating,
              onChanged: (value) {
                onToggle();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Copy

import 'package:flutter/material.dart';
import 'package:hue_rotation_sample/widgets/color_wheel.dart';
import 'package:hue_rotation_sample/widgets/auto_rotation_toggle.dart';
import 'package:hue_rotation_sample/widgets/hue_rotation_image.dart';
class HueRotationScreen extends StatefulWidget {
  const HueRotationScreen({super.key});

  @override
  State<HueRotationScreen> createState() => _HueRotationScreenState();
}

class _HueRotationScreenState extends State<HueRotationScreen>
    with SingleTickerProviderStateMixin, WidgetsBindingObserver {
  late AnimationController _controller;
  double _currentHue = 0.0;
  bool _isAutoRotating = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5),
    )..addListener(_handleAnimationUpdate);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _handleAnimationUpdate() {
    if (_isAutoRotating) {
      setState(() {
        currentHue = controller.value * 360;
      });
    }
  }

  void _toggleAutoRotation() {
    setState(() {
      isAutoRotating = !isAutoRotating;
    });

    if (_isAutoRotating) {
      _controller.repeat();
    } else {
      _controller.stop();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hue Rotation with Color Matrix')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            HueRotationImage(
              hueShift: _currentHue,
              imagePath: 'assets/bema.png',
              width: 250,
              height: 250,
            ),
            const SizedBox(height: 40),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Stack(
                  alignment: Alignment.center,
                  children: [
                    ColorWheelWidget(
                      selectedHue: _currentHue,
                      isAutoRotating: _isAutoRotating,
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text('Hue', style: TextStyle(fontSize: 16)),
                        const SizedBox(width: 8),
                        SizedBox(
                          width: 48,
                          child: Text(
                            '${_currentHue.toStringAsFixed(0)}°',
                            textAlign: TextAlign.center,
                            style: const TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
                const SizedBox(height: 16),
                AutoRotationToggle(
                  isAutoRotating: _isAutoRotating,
                  onToggle: _toggleAutoRotation,
                ),
                const SizedBox(height: 16),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Copy