diff options
Diffstat (limited to 'js/leibovitz/color.js')
-rw-r--r-- | js/leibovitz/color.js | 38 |
1 files changed, 24 insertions, 14 deletions
diff --git a/js/leibovitz/color.js b/js/leibovitz/color.js index 1438403..78f4ebc 100644 --- a/js/leibovitz/color.js +++ b/js/leibovitz/color.js @@ -1,8 +1,27 @@ /** - * Color tint management module implementing HSL-based color manipulation - * Uses the Observer pattern for state management and effect application - * Implements HSL color space transformation with circular interpolation - * Uses noise reduction and smooth blending for quality + * 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 = { @@ -11,18 +30,10 @@ const ColorManager = { _observers: new Set(), _colorInput: null, - /** - * Initializes the color manager and sets up UI controls - * Implements the Factory pattern for UI initialization - */ init() { this._setupEventListeners(); }, - /** - * Sets up event listeners for UI controls - * Implements the Observer pattern for state changes - */ _setupEventListeners() { this._colorInput = document.getElementById('color-tint'); this._colorInput.addEventListener('input', (e) => { @@ -73,7 +84,6 @@ const ColorManager = { /** * Applies color tint to an image using HSL color space - * Implements circular interpolation for hue blending * Uses noise reduction and smooth blending for quality * @param {ImageData} imageData - Source image data * @param {string} color - Hex color value @@ -98,7 +108,7 @@ const ColorManager = { const [h, s, l] = this._rgbToHsl(r, g, b); // Blend the tint color with the original color - // This creates a more natural LUT effect + // 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) |