Hueを実装

index.js

@@ -1,5 +1,6 @@
 import { applyEffect, getAvailableEffects } from './effects.js';
 import { InvertPostProcess } from './postprocess/invert.js';
+import { HuePostProcess } from './postprocess/hue.js';
 import { BasePostProcess } from './postprocess/base.js';
 
 const tagDisplayNames = {
@@ -227,7 +228,8 @@ function debounceRender(callback, delay = 200) {
 
 // ポストプロセス処理のインスタンスを作成
 const postProcessors = {
-    invert: new InvertPostProcess()
+    invert: new InvertPostProcess(),
+    hue: new HuePostProcess()
 };
 
 /**
@@ -266,6 +268,15 @@ function initializePostProcessUI() {
         const card = createPostProcessCard(processor);
         container.appendChild(card);
     });
+
+    // スライダーの値変更時のイベントハンドラを設定
+    const hueRotate = document.getElementById('hueRotate');
+    if (hueRotate) {
+        hueRotate.addEventListener('input', (e) => {
+            document.getElementById('hueRotateValue').textContent = e.target.value;
+            debounceRender(renderAllPresets);
+        });
+    }
 }
 
 /**