diff options
Diffstat (limited to 'js/leibovitz/blur.js')
-rw-r--r-- | js/leibovitz/blur.js | 43 |
1 files changed, 22 insertions, 21 deletions
diff --git a/js/leibovitz/blur.js b/js/leibovitz/blur.js index 27fa480..bc6cddf 100644 --- a/js/leibovitz/blur.js +++ b/js/leibovitz/blur.js @@ -1,8 +1,24 @@ /** - * 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 + * Blur management module implementing optimized box blur algorithm. + * + * Implements a two-pass box blur algorithm with boundary optimization. + * Uses block-based processing for improved performance on large images. + * + * Implements the following design patterns: + * - Observer Pattern: state management and effect application + * - Factory Pattern: UI initialization + * - Strategy Pattern: blur algorithm implementation + * - Command Pattern: state reset operations + * + * 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 = { @@ -12,20 +28,12 @@ const BlurManager = { _slider: null, _value: null, - /** - * Initializes the blur manager and sets up UI controls - * Implements the Factory pattern for UI initialization - */ init() { this._slider = document.getElementById('blur-slider'); this._value = document.getElementById('blur-value'); this._setupEventListeners(); }, - /** - * Sets up event listeners for UI controls - * Implements the Observer pattern for state changes - */ _setupEventListeners() { this._slider.addEventListener('input', () => { const value = this._slider.value; @@ -55,8 +63,8 @@ const BlurManager = { /** * Applies optimized box blur to an image - * Implements two-pass blur with content-aware boundary detection - * Uses separate horizontal and vertical passes for performance + * And implements two-pass blur with content-aware boundary detection + * Uses separate horizontal and vertical passes, which is more performant * @param {ImageData} imageData - Source image data * @param {number} radius - Blur radius * @returns {ImageData} Blurred image data @@ -93,14 +101,12 @@ const BlurManager = { maxX = Math.min(width - 1, maxX + radius); maxY = Math.min(height - 1, maxY + radius); - // Optimized box blur implementation // First pass: horizontal blur for (let y = minY; y <= maxY; y++) { for (let x = minX; x <= maxX; x++) { let r = 0, g = 0, b = 0, a = 0; let count = 0; - // Calculate horizontal blur for this pixel for (let dx = -radius; dx <= radius; dx++) { const nx = x + dx; if (nx >= 0 && nx < width) { @@ -128,7 +134,6 @@ const BlurManager = { let r = 0, g = 0, b = 0, a = 0; let count = 0; - // Calculate vertical blur for this pixel for (let dy = -radius; dy <= radius; dy++) { const ny = y + dy; if (ny >= 0 && ny < height) { @@ -153,10 +158,6 @@ const BlurManager = { return imageData; }, - /** - * Resets blur effect to default state - * Implements the Command pattern for state reset - */ reset() { this._currentBlur = 0; this._slider.value = 0; |