1 files changed, 245 insertions, 0 deletions
diff --git a/js/leibovitz/color.js b/js/leibovitz/color.js
new file mode 100644
index 0000000..78f4ebc
--- /dev/null
+++ b/js/leibovitz/color.js
@@ -0,0 +1,245 @@
+/**
+ * Color tint management module implementing HSL-based color manipulation.
+ * 
+ * Implements color tinting using HSL color space transformation with circular interpolation.
+ * Features noise reduction and smooth blending for high-quality results.
+ * 
+ * Implements the following design patterns:
+ * - Observer Pattern: state management and effect application
+ * - Factory Pattern: UI initialization
+ * - Strategy Pattern: color manipulation algorithms
+ * - Command Pattern: state reset operations
+ * 
+ * Color manipulation process:
+ * 1. Convert RGB to HSL color space
+ * 2. Apply circular interpolation for hue blending
+ * 3. Smooth blending for saturation and lightness
+ * 4. Noise reduction through value rounding
+ * 5. Convert back to RGB color space
+ * 
+ * Features:
+ * - Circular interpolation for natural hue transitions
+ * - Noise reduction through value rounding
+ * - Smooth blending with quadratic easing
+ * - HSL color space for better color manipulation
+ */
+
+const ColorManager = {
+    // Private state
+    _currentColor: null,
+    _observers: new Set(),
+    _colorInput: null,
+
+    init() {
+        this._setupEventListeners();
+    },
+
+    _setupEventListeners() {
+        this._colorInput = document.getElementById('color-tint');
+        this._colorInput.addEventListener('input', (e) => {
+            this._currentColor = e.target.value;
+            this._notifyObservers();
+        });
+
+        const resetButton = document.getElementById('reset-color');
+        resetButton.addEventListener('click', () => {
+            // Reset color tint
+            this._currentColor = null;
+            this._colorInput.value = '#ffffff';
+            this._notifyObservers();
+
+            // Reset contrast
+            ContrastManager.reset();
+
+            // Reset blur
+            BlurManager.reset();
+
+            // Reset white balance to default (6500K)
+            const balanceSlider = document.getElementById('balance-slider');
+            const balanceValue = document.getElementById('balance-value');
+            if (balanceSlider && balanceValue) {
+                balanceSlider.value = 6500;
+                balanceValue.textContent = '6500K';
+            }
+        });
+    },
+
+    _notifyObservers() {
+        this._observers.forEach(observer => observer(this._currentColor));
+    },
+
+    /**
+     * Subscribes to color state changes
+     * @param {Function} observer - Callback function for state changes
+     * @returns {Function} Unsubscribe function
+     */
+    subscribe(observer) {
+        this._observers.add(observer);
+        return () => this._observers.delete(observer);
+    },
+
+    getCurrentColor() {
+        return this._currentColor;
+    },
+
+    /**
+     * Applies color tint to an image using HSL color space
+     * Uses noise reduction and smooth blending for quality
+     * @param {ImageData} imageData - Source image data
+     * @param {string} color - Hex color value
+     * @returns {ImageData} Tinted image data
+     */
+    applyTint(imageData, color) {
+        if (!color) return imageData;
+
+        const { data } = imageData;
+        const [tintR, tintG, tintB] = this._hexToRgb(color);
+        
+        // Convert tint color to HSL for better color manipulation
+        const [tintH, tintS, tintL] = this._rgbToHsl(tintR, tintG, tintB);
+        
+        // Apply tint to each pixel with reduced noise
+        for (let i = 0; i < data.length; i += 4) {
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+            
+            // Convert pixel to HSL
+            const [h, s, l] = this._rgbToHsl(r, g, b);
+            
+            // Blend the tint color with the original color
+            // This tries to create a more natural LUT effect
+            const blendFactor = 0.15; // Reduced from 0.3 to 0.15 for smoother effect
+            
+            // Smooth blending for hue (circular interpolation)
+            const newH = this._blendHue(h, tintH, blendFactor);
+            
+            // Smooth blending for saturation and lightness with noise reduction
+            const newS = this._smoothBlend(s, tintS, blendFactor);
+            const newL = this._smoothBlend(l, tintL, blendFactor);
+            
+            // Convert back to RGB with noise reduction
+            const [newR, newG, newB] = this._hslToRgb(newH, newS, newL);
+            
+            // Apply noise reduction by rounding to nearest multiple of 4
+            data[i] = Math.round(newR / 4) * 4;
+            data[i + 1] = Math.round(newG / 4) * 4;
+            data[i + 2] = Math.round(newB / 4) * 4;
+        }
+
+        return imageData;
+    },
+
+    /**
+     * Converts hex color to RGB values
+     * @param {string} hex - Hex color string
+     * @returns {Array} RGB values [r, g, b]
+     */
+    _hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? [
+            parseInt(result[1], 16),
+            parseInt(result[2], 16),
+            parseInt(result[3], 16)
+        ] : null;
+    },
+
+    /**
+     * Converts RGB to HSL color space
+     * @param {number} r - Red component
+     * @param {number} g - Green component
+     * @param {number} b - Blue component
+     * @returns {Array} HSL values [h, s, l]
+     */
+    _rgbToHsl(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h, s, l = (max + min) / 2;
+        
+        if (max === min) {
+            h = s = 0;
+        } else {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            
+            switch (max) {
+                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+                case g: h = (b - r) / d + 2; break;
+                case b: h = (r - g) / d + 4; break;
+            }
+            h /= 6;
+        }
+        
+        return [h, s, l];
+    },
+
+    /**
+     * Converts HSL to RGB color space
+     * @param {number} h - Hue component
+     * @param {number} s - Saturation component
+     * @param {number} l - Lightness component
+     * @returns {Array} RGB values [r, g, b]
+     */
+    _hslToRgb(h, s, l) {
+        let r, g, b;
+        
+        if (s === 0) {
+            r = g = b = l;
+        } else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0) t += 1;
+                if (t > 1) t -= 1;
+                if (t < 1/6) return p + (q - p) * 6 * t;
+                if (t < 1/2) return q;
+                if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+                return p;
+            };
+            
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            
+            r = hue2rgb(p, q, h + 1/3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1/3);
+        }
+        
+        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+    },
+
+    /**
+     * Blends two hue values with circular interpolation
+     * @param {number} h1 - First hue value
+     * @param {number} h2 - Second hue value
+     * @param {number} factor - Blend factor
+     * @returns {number} Blended hue value
+     */
+    _blendHue(h1, h2, factor) {
+        const diff = h2 - h1;
+        if (Math.abs(diff) > 0.5) {
+            if (h1 > h2) {
+                return h1 + (h2 + 1 - h1) * factor;
+            } else {
+                return h1 + (h2 - (h1 + 1)) * factor;
+            }
+        }
+        return h1 + diff * factor;
+    },
+
+    /**
+     * Smooth blending with noise reduction
+     * Uses cubic easing function for smooth transitions
+     * @param {number} v1 - First value
+     * @param {number} v2 - Second value
+     * @param {number} factor - Blend factor
+     * @returns {number} Blended value
+     */
+    _smoothBlend(v1, v2, factor) {
+        // Apply a smooth easing function
+        const t = factor * factor * (3 - 2 * factor);
+        return v1 + (v2 - v1) * t;
+    }
+}; 
\ No newline at end of file