diff options
author | elioat <elioat@tilde.institute> | 2025-03-30 14:17:25 -0400 |
---|---|---|
committer | elioat <elioat@tilde.institute> | 2025-03-30 14:17:25 -0400 |
commit | dc35422ab591a9240485da2e69d10020eb1de5ff (patch) | |
tree | 1d315ce4b369040b1fd7c71b70ebe2bec999061c /js/leibovitz/blur.js | |
parent | 79e9336d5334c229092ff228e1146a6fdf33793c (diff) | |
download | tour-dc35422ab591a9240485da2e69d10020eb1de5ff.tar.gz |
*
Diffstat (limited to 'js/leibovitz/blur.js')
-rw-r--r-- | js/leibovitz/blur.js | 59 |
1 files changed, 31 insertions, 28 deletions
diff --git a/js/leibovitz/blur.js b/js/leibovitz/blur.js index 08d1ec5..27fa480 100644 --- a/js/leibovitz/blur.js +++ b/js/leibovitz/blur.js @@ -1,5 +1,9 @@ -// Blur management module -// Uses the Observer pattern to notify the main camera module of blur changes +/** + * 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 + */ const BlurManager = { // Private state @@ -8,14 +12,20 @@ const BlurManager = { _slider: null, _value: null, - // Initialize the blur manager + /** + * 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(); }, - // Private methods + /** + * Sets up event listeners for UI controls + * Implements the Observer pattern for state changes + */ _setupEventListeners() { this._slider.addEventListener('input', () => { const value = this._slider.value; @@ -29,7 +39,11 @@ const BlurManager = { this._observers.forEach(observer => observer(this._currentBlur)); }, - // Public methods + /** + * Subscribes to blur 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); @@ -39,7 +53,14 @@ const BlurManager = { return this._currentBlur; }, - // Apply Gaussian blur to an image + /** + * Applies optimized box blur to an image + * Implements two-pass blur with content-aware boundary detection + * Uses separate horizontal and vertical passes for performance + * @param {ImageData} imageData - Source image data + * @param {number} radius - Blur radius + * @returns {ImageData} Blurred image data + */ applyBlur(imageData, radius) { if (!radius) return imageData; @@ -132,28 +153,10 @@ const BlurManager = { return imageData; }, - // Create a 1D Gaussian kernel - _createGaussianKernel(radius) { - const sigma = radius / 3; - const kernelSize = Math.ceil(radius * 2 + 1); - const kernel = new Array(kernelSize); - let sum = 0; - - for (let i = 0; i < kernelSize; i++) { - const x = i - radius; - kernel[i] = Math.exp(-(x * x) / (2 * sigma * sigma)); - sum += kernel[i]; - } - - // Normalize the kernel - for (let i = 0; i < kernelSize; i++) { - kernel[i] /= sum; - } - - return kernel; - }, - - // Add reset method + /** + * Resets blur effect to default state + * Implements the Command pattern for state reset + */ reset() { this._currentBlur = 0; this._slider.value = 0; |