diff options
| -rw-r--r-- | js/leibovitz/balance.js | 95 | ||||
| -rw-r--r-- | js/leibovitz/blur.js | 27 | ||||
| -rw-r--r-- | js/leibovitz/color.js | 30 | ||||
| -rw-r--r-- | js/leibovitz/contrast.js | 27 | ||||
| -rw-r--r-- | js/leibovitz/dither.js | 37 | ||||
| -rw-r--r-- | js/leibovitz/leibovitz.js | 33 | ||||
| -rw-r--r-- | js/leibovitz/manifest.json | 9 |
7 files changed, 201 insertions, 57 deletions
diff --git a/js/leibovitz/balance.js b/js/leibovitz/balance.js index 73f60e8..b489a62 100644 --- a/js/leibovitz/balance.js +++ b/js/leibovitz/balance.js @@ -1,53 +1,88 @@ /** - * White balance management module implementing temperature-based color adjustment - * Uses the Observer pattern for state management and effect application - * Implements a non-linear temperature adjustment algorithm with RGB channel scaling - * Uses a static class pattern for state management + * @fileoverview White balance management module implementing temperature-based color adjustment. + * + * @description + * Implements white balance adjustment using temperature-based RGB channel scaling. + * Provides non-linear temperature adjustment for natural color correction. + * + * @architecture + * Implements the following design patterns: + * - Observer Pattern: For state management and effect application + * - Factory Pattern: For UI initialization + * - Strategy Pattern: For temperature adjustment algorithm + * - Command Pattern: For state reset operations + * + * @algorithm + * White balance adjustment process: + * 1. Convert temperature to ratio relative to neutral (6500K) + * 2. Apply non-linear scaling (0.2 factor) to red and blue channels + * 3. Warmer temps (<6500K) increase red, decrease blue + * 4. Cooler temps (>6500K) increase blue, decrease red + * + * Features: + * - Temperature-based color adjustment + * - Non-linear response curve + * - Preserves green channel + * - Real-time updates */ -class BalanceManager { +const BalanceManager = { + // Private state + _observers: new Set(), + _slider: null, + _value: null, + /** * Initializes the balance manager and sets up UI controls * Implements the Factory pattern for UI initialization */ - static init() { - this.balanceSlider = document.getElementById('balance-slider'); - this.balanceValue = document.getElementById('balance-value'); + init() { + this._slider = document.getElementById('balance-slider'); + this._value = document.getElementById('balance-value'); this._setupEventListeners(); - } + }, /** * Sets up event listeners for UI controls * Implements the Observer pattern for state changes */ - static _setupEventListeners() { - this.balanceSlider.addEventListener('input', () => { - const value = this.balanceSlider.value; - this.balanceValue.textContent = `${value}K`; + _setupEventListeners() { + this._slider.addEventListener('input', () => { + const value = this._slider.value; + this._value.textContent = `${value}K`; + this._notifyObservers(); }); - } + }, + + _notifyObservers() { + this._observers.forEach(observer => observer(this.getCurrentBalance())); + }, + + /** + * Subscribes to balance 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); + }, /** * Gets the current white balance temperature * @returns {number} Current temperature in Kelvin (2000K-10000K) */ - static getCurrentBalance() { - return parseInt(this.balanceSlider.value); - } + getCurrentBalance() { + return parseInt(this._slider.value); + }, /** * Applies white balance adjustment to an image * Implements temperature-based RGB channel scaling with non-linear response * @param {ImageData} imageData - Source image data * @returns {ImageData} White balanced image data - * - * Algorithm: - * 1. Convert temperature to ratio relative to neutral (6500K) - * 2. Apply non-linear scaling (0.2 factor) to red and blue channels - * 3. Warmer temps (<6500K) increase red, decrease blue - * 4. Cooler temps (>6500K) increase blue, decrease red */ - static applyBalance(imageData) { + applyBalance(imageData) { const balance = this.getCurrentBalance(); if (!balance || balance === 6500) return imageData; // 6500K is neutral @@ -63,5 +98,15 @@ class BalanceManager { } return imageData; + }, + + /** + * Resets balance effect to default state + * Implements the Command pattern for state reset + */ + reset() { + this._slider.value = 6500; + this._value.textContent = '6500K'; + this._notifyObservers(); } -} \ No newline at end of file +}; \ No newline at end of file diff --git a/js/leibovitz/blur.js b/js/leibovitz/blur.js index 27fa480..001246b 100644 --- a/js/leibovitz/blur.js +++ b/js/leibovitz/blur.js @@ -1,8 +1,27 @@ /** - * Blur management module implementing optimized box blur - * Uses the Observer pattern for state management and effect application - * Implements two-pass box blur algorithm with boundary detection - * Uses content-aware optimization for performance + * @fileoverview Blur management module implementing optimized box blur algorithm. + * + * @description + * Implements a two-pass box blur algorithm with boundary optimization. + * Uses block-based processing for improved performance on large images. + * + * @architecture + * Implements the following design patterns: + * - Observer Pattern: For state management and effect application + * - Factory Pattern: For UI initialization + * - Strategy Pattern: For blur algorithm implementation + * - Command Pattern: For state reset operations + * + * @algorithm + * The blur implementation uses a two-pass approach: + * 1. Horizontal pass: Applies blur along rows + * 2. Vertical pass: Applies blur along columns + * + * Features: + * - Boundary optimization for performance + * - Block-based processing + * - Two-pass implementation for better performance + * - Edge clamping to prevent artifacts */ const BlurManager = { diff --git a/js/leibovitz/color.js b/js/leibovitz/color.js index 1438403..b26229b 100644 --- a/js/leibovitz/color.js +++ b/js/leibovitz/color.js @@ -1,8 +1,30 @@ /** - * 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 + * @fileoverview Color tint management module implementing HSL-based color manipulation. + * + * @description + * Implements color tinting using HSL color space transformation with circular interpolation. + * Features noise reduction and smooth blending for high-quality results. + * + * @architecture + * Implements the following design patterns: + * - Observer Pattern: For state management and effect application + * - Factory Pattern: For UI initialization + * - Strategy Pattern: For color manipulation algorithms + * - Command Pattern: For state reset operations + * + * @algorithm + * 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 = { diff --git a/js/leibovitz/contrast.js b/js/leibovitz/contrast.js index 01312ad..b34f205 100644 --- a/js/leibovitz/contrast.js +++ b/js/leibovitz/contrast.js @@ -1,7 +1,28 @@ /** - * Contrast management module implementing contrast adjustment - * Uses the Observer pattern for state management and effect application - * Implements linear contrast adjustment algorithm + * @fileoverview Contrast management module implementing linear contrast adjustment. + * + * @description + * Implements contrast adjustment using a linear scaling algorithm. + * Provides real-time contrast control with immediate visual feedback. + * + * @architecture + * Implements the following design patterns: + * - Observer Pattern: For state management and effect application + * - Factory Pattern: For UI initialization + * - Strategy Pattern: For contrast adjustment algorithm + * - Command Pattern: For state reset operations + * + * @algorithm + * Contrast adjustment process: + * 1. Calculate contrast factor using formula: (259 * (contrast + 255)) / (255 * (259 - contrast)) + * 2. Apply linear scaling to each color channel + * 3. Maintain color balance while adjusting contrast + * + * Features: + * - Linear contrast adjustment + * - Per-channel processing + * - Real-time updates + * - Preserves color relationships */ const ContrastManager = { diff --git a/js/leibovitz/dither.js b/js/leibovitz/dither.js index b011eca..66d6287 100644 --- a/js/leibovitz/dither.js +++ b/js/leibovitz/dither.js @@ -1,15 +1,36 @@ /** - * Dithering management module implementing various dithering algorithms - * Uses the Observer pattern for state management and effect application - * Implements block-based processing for performance optimization - * Uses the Strategy pattern for algorithm selection + * @fileoverview Dithering management module implementing multiple dithering algorithms. * + * @description + * Implements various dithering algorithms with block-based processing for performance. + * Supports multiple dithering patterns with configurable block sizes. + * + * @architecture + * Implements the following design patterns: + * - Observer Pattern: For state management and effect application + * - Factory Pattern: For UI initialization + * - Strategy Pattern: For dithering algorithm selection + * - Command Pattern: For state reset operations + * + * @algorithm + * Supported dithering algorithms: + * - Floyd-Steinberg: Error diffusion with standard distribution pattern + * - Ordered: Matrix-based threshold dithering + * - Atkinson: Error diffusion with 1/8 error distribution + * - Bayer: Pattern-based threshold dithering + * + * @colorLevels * Each color channel (Red, Green, Blue) has 4 possible values: - * 0 -> Black/None - * 85 -> Low - * 170 -> Medium - * 255 -> Full + * - 0 -> Black/None + * - 85 -> Low + * - 170 -> Medium + * - 255 -> Full * + * Features: + * - Block-based processing for performance + * - Multiple dithering algorithms + * - Configurable block sizes + * - Error diffusion patterns */ const DitherManager = { diff --git a/js/leibovitz/leibovitz.js b/js/leibovitz/leibovitz.js index 030e7d2..d118c70 100644 --- a/js/leibovitz/leibovitz.js +++ b/js/leibovitz/leibovitz.js @@ -1,8 +1,33 @@ /** - * Main application entry point for the app. - * Implements a functional architecture with separate managers for each effect. - * Uses the Observer pattern for state management and effect application. - * Implements the State pattern for mode management (camera/edit). + * @fileoverview Main application entry point for a web-based camera application. + * + * @description + * + * Susan Sontag: + * > The camera makes everyone a tourist in other people's reality, + * > and eventually in one's own. + * + * A functional architecture implementing image processing effects with real-time camera preview. + * Uses multiple design patterns for robust state management and effect application: + * - Observer Pattern: For state management and effect application across modules + * - State Pattern: For mode management (camera/edit) + * - Factory Pattern: For UI initialization and media device creation + * - Strategy Pattern: For algorithm selection in effect application + * - Command Pattern: For canvas operations and state reset + * - Chain of Responsibility: For sequential effect application + * + * + * @architecture + * The application is structured into separate manager modules for each effect: + * - ColorManager: HSL-based color manipulation + * - DitherManager: Multiple dithering algorithms + * - ContrastManager: Linear contrast adjustment + * - BlurManager: Optimized box blur + * - BalanceManager: Temperature-based color adjustment + * + * Each manager implements the Observer pattern for state changes and the Strategy pattern + * for effect application algorithms. + * */ const canvas = document.getElementById('canvas'); diff --git a/js/leibovitz/manifest.json b/js/leibovitz/manifest.json index 03dc94f..1ddc0b2 100644 --- a/js/leibovitz/manifest.json +++ b/js/leibovitz/manifest.json @@ -50,15 +50,6 @@ "type": "image/png" } ], - "screenshots": [ - { - "src": "screenshot1.png", - "sizes": "1080x1920", - "type": "image/png", - "platform": "narrow", - "label": "Leibovitz Camera App" - } - ], "categories": ["photo", "camera", "art"], "prefer_related_applications": false, "shortcuts": [ |