Update script.js

script.js

@@ -101,32 +101,74 @@ document.addEventListener('DOMContentLoaded', function() {
     };
 
     // フィルターを適用する関数
-    const applyFilters = function() {
-        if (!camanInstance || isApplyingFilters) return;
+const applyFilters = function() {
+    if (!camanInstance || isApplyingFilters) return;
+    
+    isApplyingFilters = true;
+    
+    try {
+        camanInstance.revert(false);
         
-        isApplyingFilters = true;
+        // 基本調整を適用
+        camanInstance.brightness(parseInt(brightnessSlider.value));
+        camanInstance.contrast(parseInt(contrastSlider.value) * 1.5);
+        camanInstance.saturation(parseInt(saturationSlider.value));
         
-        try {
-            camanInstance.revert(false);
-            
-            // 基本調整を直接適用
-            camanInstance.brightness(parseInt(brightnessSlider.value));
-            camanInstance.contrast(parseInt(contrastSlider.value) * 1.5);
-            camanInstance.saturation(parseInt(saturationSlider.value));
+        // RGBカーブ調整を適用
+        const applyRgbCurves = function() {
+            const redCurve = createCurveData(redCurvePoints);
+            const greenCurve = createCurveData(greenCurvePoints);
+            const blueCurve = createCurveData(blueCurvePoints);
             
-            // カーブ調整のみレイヤー処理
-            camanInstance.newLayer(function() {
-                applyRgbCurves.call(camanInstance);
-                applyLuminanceCurve.call(camanInstance);
+            this.process("rgbCurve", function(rgba) {
+                rgba.r = redCurve[rgba.r];
+                rgba.g = greenCurve[rgba.g];
+                rgba.b = blueCurve[rgba.b];
+                return rgba;
             });
+        };
+        
+        // 輝度カーブ調整を適用
+        const applyLuminanceCurve = function() {
+            const luminanceCurve = createCurveData(luminanceCurvePoints);
+            const shadowAmount = parseInt(shadowsSlider.value);
+            const highlightAmount = parseInt(highlightsSlider.value);
             
-            camanInstance.render();
-        } catch (e) {
-            console.error("Error applying filters:", e);
-        } finally {
-            isApplyingFilters = false;
-        }
-    };
+            this.process("luminanceAdjustment", function(rgba) {
+                const luminance = 0.299 * rgba.r + 0.587 * rgba.g + 0.114 * rgba.b;
+                const normalizedLum = luminance / 255;
+                
+                // カーブ調整
+                const curveAdjustment = (luminanceCurve[luminance] - luminance);
+                
+                // シャドウ調整（低輝度ほど強く適用）
+                const shadowAdjust = shadowAmount * (1 - normalizedLum);
+                
+                // ハイライト調整（高輝度ほど強く適用）
+                const highlightAdjust = highlightAmount * normalizedLum;
+                
+                // 合計調整量
+                const totalAdjust = curveAdjustment + shadowAdjust + highlightAdjust;
+                
+                rgba.r = Math.min(255, Math.max(0, rgba.r + totalAdjust));
+                rgba.g = Math.min(255, Math.max(0, rgba.g + totalAdjust));
+                rgba.b = Math.min(255, Math.max(0, rgba.b + totalAdjust));
+                
+                return rgba;
+            });
+        };
+        
+        // カーブ調整を適用
+        applyRgbCurves.call(camanInstance);
+        applyLuminanceCurve.call(camanInstance);
+        
+        camanInstance.render();
+    } catch (e) {
+        console.error("Error applying filters:", e);
+    } finally {
+        isApplyingFilters = false;
+    }
+};
 
     // カーブを描画する関数
     const drawCurve = function(canvas, points, color) {