Update script.js

script.js

@@ -7,9 +7,6 @@ document.addEventListener('DOMContentLoaded', function() {
     const saturationSlider = document.getElementById('saturation');
     const shadowsSlider = document.getElementById('shadows');
     const highlightsSlider = document.getElementById('highlights');
-    const hueRedSlider = document.getElementById('hue-red');
-    const hueGreenSlider = document.getElementById('hue-green');
-    const hueBlueSlider = document.getElementById('hue-blue');
     const brightnessValue = document.getElementById('brightness-value');
     const contrastValue = document.getElementById('contrast-value');
     const saturationValue = document.getElementById('saturation-value');
@@ -20,19 +17,20 @@ document.addEventListener('DOMContentLoaded', function() {
     const downloadBtn = document.getElementById('download-btn');
     const loadingOverlay = document.getElementById('loading-overlay');
     
-    // RGBカーブ用のキャンバス
+    // カーブ用のキャンバス
     const redCurveCanvas = document.getElementById('red-curve');
     const greenCurveCanvas = document.getElementById('green-curve');
     const blueCurveCanvas = document.getElementById('blue-curve');
+    const luminanceCurveCanvas = document.getElementById('luminance-curve');
     
     // カーブ制御用の変数
     let redCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
     let greenCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
     let blueCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
+    let luminanceCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
     
     let camanInstance = null;
     let originalImageData = null;
-    let currentFilters = {};
     
     // 画像アップロードの処理
     imageUpload.addEventListener('change', function(e) {
@@ -71,7 +69,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     camanInstance = this;
                     originalImageData = this.canvas.toDataURL();
                     
-                    // RGBカーブを初期化
+                    // カーブを初期化
                     initCurves();
                     hideLoading();
                 });
@@ -109,69 +107,22 @@ document.addEventListener('DOMContentLoaded', function() {
         }, 100);
     });
     
-    // フィルターを適用する関数（強化版）
+    // フィルターを適用する関数
     function applyFilters() {
         if (!camanInstance) return;
         
         camanInstance.revert(false);
         
-        // 現在のフィルター設定を保存
-        currentFilters = {
-            brightness: parseInt(brightnessSlider.value),
-            contrast: parseInt(contrastSlider.value),
-            saturation: parseInt(saturationSlider.value),
-            shadows: parseInt(shadowsSlider.value),
-            highlights: parseInt(highlightsSlider.value),
-            hueRed: parseInt(hueRedSlider.value),
-            hueGreen: parseInt(hueGreenSlider.value),
-            hueBlue: parseInt(hueBlueSlider.value)
-        };
-        
-        // 明るさ（範囲拡大: -100 to 100 → -150 to 150）
-        camanInstance.brightness(currentFilters.brightness * 1.5);
-        
-        // コントラスト（効果を強化）
-        camanInstance.contrast(currentFilters.contrast * 1.5);
-        
-        // 彩度
-        camanInstance.saturation(currentFilters.saturation);
-        
-        // シャドウ（効果を強化、範囲拡大）
-        if (currentFilters.shadows > 0) {
-            camanInstance.shadows(currentFilters.shadows * 2);
-        } else {
-            camanInstance.exposure(currentFilters.shadows / 5);
-        }
-        
-        // ハイライト（効果を強化、範囲拡大）
-        if (currentFilters.highlights > 0) {
-            camanInstance.highlights(currentFilters.highlights * 2);
-        } else {
-            camanInstance.exposure(currentFilters.highlights / 5);
-        }
-        
-        // HSL調整
-        camanInstance.hue(currentFilters.hueRed / 2);
-        camanInstance.hue(currentFilters.hueGreen / 2);
-        camanInstance.hue(currentFilters.hueBlue / 2);
+        // 基本調整
+        camanInstance.brightness(parseInt(brightnessSlider.value));
+        camanInstance.contrast(parseInt(contrastSlider.value) * 1.5); // コントラスト強化
+        camanInstance.saturation(parseInt(saturationSlider.value));
         
         // RGBカーブを適用
         applyRgbCurves();
         
-        // 追加フィルター: シャープネス
-        if (currentFilters.sharpness) {
-            camanInstance.sharpen(currentFilters.sharpness);
-        }
-        
-        // 追加フィルター: ノイズ
-        if (currentFilters.noise) {
-            camanInstance.noise(currentFilters.noise);
-        }
-        
-        // 追加フィルター: ビネット
-        if (currentFilters.vignette) {
-            camanInstance.vignette("10%", currentFilters.vignette * 2);
-        }
+        // 輝度カーブを適用（シャドウ/ハイライト調整）
+        applyLuminanceCurve();
         
         camanInstance.render();
     }
@@ -181,10 +132,12 @@ document.addEventListener('DOMContentLoaded', function() {
         drawCurve(redCurveCanvas, redCurvePoints, 'red');
         drawCurve(greenCurveCanvas, greenCurvePoints, 'green');
         drawCurve(blueCurveCanvas, blueCurvePoints, 'blue');
+        drawCurve(luminanceCurveCanvas, luminanceCurvePoints, '#888');
         
         setupCurveInteraction(redCurveCanvas, redCurvePoints, 'red');
         setupCurveInteraction(greenCurveCanvas, greenCurvePoints, 'green');
         setupCurveInteraction(blueCurveCanvas, blueCurvePoints, 'blue');
+        setupCurveInteraction(luminanceCurveCanvas, luminanceCurvePoints, '#888');
     }
     
     // カーブを描画
@@ -285,6 +238,9 @@ document.addEventListener('DOMContentLoaded', function() {
             }
             
             drawCurve(canvas, points, color);
+            if (canvas !== luminanceCurveCanvas) {
+                applyBtn.click();
+            }
         });
         
         canvas.addEventListener('mousemove', function(e) {
@@ -309,16 +265,25 @@ document.addEventListener('DOMContentLoaded', function() {
             draggedPoint.y = y;
             
             drawCurve(canvas, points, color);
+            if (canvas !== luminanceCurveCanvas) {
+                applyBtn.click();
+            }
         });
         
         canvas.addEventListener('mouseup', function() {
             isDragging = false;
             draggedPoint = null;
+            if (canvas === luminanceCurveCanvas) {
+                applyBtn.click();
+            }
         });
         
         canvas.addEventListener('mouseleave', function() {
             isDragging = false;
             draggedPoint = null;
+            if (canvas === luminanceCurveCanvas && isDragging) {
+                applyBtn.click();
+            }
         });
         
         // ポイントを削除するダブルクリック
@@ -336,6 +301,9 @@ document.addEventListener('DOMContentLoaded', function() {
                 if (distance < 15) {
                     points.splice(i, 1);
                     drawCurve(canvas, points, color);
+                    if (canvas !== luminanceCurveCanvas) {
+                        applyBtn.click();
+                    }
                     return;
                 }
             }
@@ -360,6 +328,48 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
     
+    // 輝度カーブを適用（連続的なシャドウ/ハイライト調整）
+    function applyLuminanceCurve() {
+        if (!camanInstance) return;
+        
+        const luminanceCurve = createCurveData(luminanceCurvePoints);
+        const shadowAmount = parseInt(shadowsSlider.value) / 100 * 50; // -50から50の範囲に調整
+        const highlightAmount = parseInt(highlightsSlider.value) / 100 * 50;
+        
+        camanInstance.process("luminanceAdjustment", function(rgba) {
+            // ピクセルの輝度を計算
+            const luminance = 0.299 * rgba.r + 0.587 * rgba.g + 0.114 * rgba.b;
+            
+            // 輝度カーブから調整値を取得
+            const curveAdjustment = (luminanceCurve[luminance] - luminance) / 255 * 100;
+            
+            // シャドウ/ハイライト調整を適用
+            let adjustment = 0;
+            
+            // シャドウ調整（低輝度ほど強く適用）
+            if (shadowAmount !== 0) {
+                const shadowFactor = 1 - (luminance / 255); // 0（明るい）～1（暗い）
+                adjustment += shadowAmount * shadowFactor;
+            }
+            
+            // ハイライト調整（高輝度ほど強く適用）
+            if (highlightAmount !== 0) {
+                const highlightFactor = luminance / 255; // 0（暗い）～1（明るい）
+                adjustment += highlightAmount * highlightFactor;
+            }
+            
+            // 輝度カーブの調整を追加
+            adjustment += curveAdjustment;
+            
+            // 調整を適用
+            rgba.r = Math.min(255, Math.max(0, rgba.r + adjustment));
+            rgba.g = Math.min(255, Math.max(0, rgba.g + adjustment));
+            rgba.b = Math.min(255, Math.max(0, rgba.b + adjustment));
+            
+            return rgba;
+        });
+    }
+    
     // カーブデータを作成
     function createCurveData(points) {
         points.sort((a, b) => a.x - b.x);
@@ -396,9 +406,6 @@ document.addEventListener('DOMContentLoaded', function() {
         saturationSlider.value = 0;
         shadowsSlider.value = 0;
         highlightsSlider.value = 0;
-        hueRedSlider.value = 0;
-        hueGreenSlider.value = 0;
-        hueBlueSlider.value = 0;
         
         brightnessValue.textContent = '0';
         contrastValue.textContent = '0';
@@ -410,10 +417,12 @@ document.addEventListener('DOMContentLoaded', function() {
         redCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
         greenCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
         blueCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
+        luminanceCurvePoints = [{x: 0, y: 0}, {x: 255, y: 255}];
         
         drawCurve(redCurveCanvas, redCurvePoints, 'red');
         drawCurve(greenCurveCanvas, greenCurvePoints, 'green');
         drawCurve(blueCurveCanvas, blueCurvePoints, 'blue');
+        drawCurve(luminanceCurveCanvas, luminanceCurvePoints, '#888');
         
         // 画像をリセット
         const img = new Image();
@@ -429,9 +438,6 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         };
         img.src = originalImageData;
-        
-        // フィルター設定をリセット
-        currentFilters = {};
     });
     
     // ダウンロードボタン
@@ -452,53 +458,4 @@ document.addEventListener('DOMContentLoaded', function() {
     function hideLoading() {
         loadingOverlay.style.display = 'none';
     }
-    
-    // 追加機能: キーボードショートカット
-    document.addEventListener('keydown', function(e) {
-        if (e.ctrlKey && e.key === 'z') {
-            resetBtn.click();
-        } else if (e.ctrlKey && e.key === 's') {
-            downloadBtn.click();
-            e.preventDefault();
-        } else if (e.key === 'Enter') {
-            applyBtn.click();
-        }
-    });
-    
-    // 追加機能: プリセットフィルター
-    function applyPreset(presetName) {
-        switch(presetName) {
-            case 'vintage':
-                brightnessSlider.value = 10;
-                contrastSlider.value = 20;
-                saturationSlider.value = -30;
-                shadowsSlider.value = 15;
-                highlightsSlider.value = -10;
-                hueRedSlider.value = 10;
-                break;
-            case 'dramatic':
-                brightnessSlider.value = -10;
-                contrastSlider.value = 50;
-                saturationSlider.value = -20;
-                shadowsSlider.value = 30;
-                highlightsSlider.value = -20;
-                break;
-            case 'bright':
-                brightnessSlider.value = 30;
-                contrastSlider.value = 20;
-                saturationSlider.value = 40;
-                shadowsSlider.value = 20;
-                highlightsSlider.value = 10;
-                break;
-        }
-        
-        // スライダー値を更新
-        brightnessValue.textContent = brightnessSlider.value;
-        contrastValue.textContent = contrastSlider.value;
-        saturationValue.textContent = saturationSlider.value;
-        shadowsValue.textContent = shadowsSlider.value;
-        highlightsValue.textContent = highlightsSlider.value;
-        
-        applyBtn.click();
-    }
 });