about summary refs log tree commit diff stats
path: root/js/leibovitz/blur.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/leibovitz/blur.js')
-rw-r--r--js/leibovitz/blur.js43
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;