1 files changed, 30 insertions, 23 deletions

diff --git a/js/leibovitz/dither.js b/js/leibovitz/dither.js
index b011eca..e74f1be 100644
--- a/js/leibovitz/dither.js
+++ b/js/leibovitz/dither.js
@@ -1,15 +1,33 @@
 /**
- * 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
+ * Dithering management module implementing multiple dithering algorithms.
+ * 
+ * Implements a couple dithering algorithms with block-based processing.
+ * Block-based processing is faster, and has better performance.
+ * Supports multiple dithering patterns with configurable block sizes.
+ * 
+ * Implements the following design patterns:
+ * - Observer Pattern: state management and effect application
+ * - Factory Pattern: UI initialization
+ * - Strategy Pattern: dithering algorithm selection
+ * - Command Pattern: state reset operations
+ * 
+ * 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
  * 
  * 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 = {
@@ -22,17 +40,12 @@ const DitherManager = {
 
     /**
      * Initializes the dither manager and sets up UI controls
-     * Implements the Factory pattern for UI initialization
      */
     init() {
         this._setupEventListeners();
         this._pixelSizeControl = document.getElementById('pixel-size-control');
     },
 
-    /**
-     * Sets up event listeners for UI controls
-     * Implements the Observer pattern for state changes
-     */
     _setupEventListeners() {
         this._modeSelect = document.getElementById('dither-select');
         this._modeSelect.addEventListener('change', (e) => {
@@ -43,7 +56,7 @@ const DitherManager = {
             this._notifyObservers();
         });
 
-        // Only add the event listener if the element exists
+        // Only add the event listener if the element actually exists
         const blockSizeSlider = document.getElementById('block-size-slider');
         if (blockSizeSlider) {
             blockSizeSlider.addEventListener('input', (e) => {
@@ -76,7 +89,6 @@ const DitherManager = {
 
     /**
      * Applies selected dithering algorithm to image data
-     * Implements the Strategy pattern for algorithm selection
      * @param {ImageData} imageData - Source image data
      * @param {string} mode - Selected dithering algorithm
      * @returns {ImageData} Processed image data
@@ -104,7 +116,6 @@ const DitherManager = {
 
     /**
      * Quantizes a value to create chunkier output
-     * Implements the Strategy pattern for quantization
      * @param {number} value - Input value
      * @param {number} levels - Number of quantization levels
      * @returns {number} Quantized value
@@ -116,7 +127,6 @@ const DitherManager = {
 
     /**
      * Applies Floyd-Steinberg dithering algorithm
-     * Implements error diffusion with block-based processing
      * Uses a 4x4 error distribution pattern for smoother results
      * @param {Uint8ClampedArray} data - Image data
      * @param {number} width - Image width
@@ -129,7 +139,7 @@ const DitherManager = {
         const levels = 4;
         const blockSize = this.currentBlockSize;
 
-        // Process in blocks for performance
+        // Process in blocks, block by block
         for (let y = 0; y < height; y += blockSize) {
             for (let x = 0; x < width; x += blockSize) {
                 // Calculate block average
@@ -206,8 +216,8 @@ const DitherManager = {
 
     /**
      * Applies ordered dithering using a Bayer matrix
-     * Implements threshold-based dithering with block processing
-     * Uses a 4x4 Bayer matrix pattern for structured dithering
+     * And implements threshold-based dithering with block processing
+     * Also uses a 4x4 Bayer matrix pattern for structured dithering
      * @param {Uint8ClampedArray} data - Image data
      * @param {number} width - Image width
      * @param {number} height - Image height
@@ -272,7 +282,6 @@ const DitherManager = {
 
     /**
      * Applies Atkinson dithering algorithm
-     * Implements error diffusion with block-based processing
      * @param {Uint8ClampedArray} data - Image data
      * @param {number} width - Image width
      * @param {number} height - Image height
@@ -347,7 +356,6 @@ const DitherManager = {
 
     /**
      * Applies Bayer dithering algorithm
-     * Implements threshold-based dithering with block processing
      * @param {Uint8ClampedArray} data - Image data
      * @param {number} width - Image width
      * @param {number} height - Image height
@@ -357,7 +365,6 @@ const DitherManager = {
         const newData = new Uint8ClampedArray(data);
         const blockSize = this.currentBlockSize;
         
-        // 4x4 Bayer matrix for pattern generation
         const bayerMatrix = [
             [ 0, 8, 2, 10],
             [12, 4, 14, 6 ],