*

1 files changed, 96 insertions, 16 deletions

diff --git a/html/simple-shape/index.html b/html/simple-shape/index.html
index a28d98e..a05b9f2 100644
--- a/html/simple-shape/index.html
+++ b/html/simple-shape/index.html
@@ -53,22 +53,43 @@
         <canvas id="canvas"></canvas>
     </div>
     <script>
-        // Set up canvas with print-friendly dimensions (assuming 300 DPI)
+        /**
+         * Canvas Setup and Configuration
+         * This section initializes a high-resolution canvas optimized for both screen display and printing.
+         * The dimensions are calculated based on standard US Letter size (8.5x11 inches) at 300 DPI.
+         */
         const canvas = document.getElementById('canvas');
         const ctx = canvas.getContext('2d');
         
-        // 8.5 inches * 300 pixels per inch = 2550 pixels
-        // 11 inches * 300 pixels per inch = 3300 pixels
-        canvas.width = 2550;
-        canvas.height = 3300;
-        
-        // Utility functions for pattern generation
+        canvas.width = 2550;  // 8.5in * 300dpi
+        canvas.height = 3300; // 11in * 300dpi
+
+        /**
+         * Utility Functions
+         * A collection of pure functions for randomization, following the functional programming paradigm.
+         * These provide a consistent interface for generating random values across the application.
+         */
         const random = (min, max) => Math.random() * (max - min) + min;
         const randomInt = (min, max) => Math.floor(random(min, max));
         const randomChoice = arr => arr[Math.floor(Math.random() * arr.length)];
 
-        // Basic shape generators
+        /**
+         * Shape Factory Pattern
+         * Implements the Factory pattern to create basic geometric shapes.
+         * Each factory method is a pure function that takes position and size parameters.
+         * The factory uses method chaining with the Canvas API for drawing operations.
+         * @namespace
+         */
         const shapes = {
+            /**
+             * Creates a circle with optional fill
+             * @param {number} x - Center X coordinate
+             * @param {number} y - Center Y coordinate
+             * @param {number} size - Reference size for radius calculation
+             * @param {Object} params - Optional parameters for customization
+             * @param {number} [params.radius] - Optional explicit radius
+             * @param {boolean} [params.fill] - Whether to fill the circle
+             */
             circle: (x, y, size, params = {}) => {
                 const radius = params.radius || size/3;
                 ctx.beginPath();
@@ -97,10 +118,29 @@
             }
         };
 
-        // Pattern generators that are simple to draw
+        /**
+         * Pattern Generator System
+         * Implements the Strategy pattern for pattern generation.
+         * Uses higher-order functions to create composable pattern generators.
+         * Each pattern is a pure function that can be transformed and combined.
+         * 
+         * @function generatePattern
+         * @returns {Function} A pattern generation function that takes x, y, and size parameters
+         */
         const generatePattern = () => {
+            /**
+             * Collection of pattern strategies
+             * Each strategy is a pure function implementing a specific pattern algorithm
+             * @type {Array<Function>}
+             */
             const types = [
-                // Simple repeating circles
+                /**
+                 * Grid-based pattern strategy
+                 * Demonstrates use of nested loops for regular grid generation
+                 * @param {number} x - Starting X coordinate
+                 * @param {number} y - Starting Y coordinate
+                 * @param {number} size - Pattern size
+                 */
                 (x, y, size) => {
                     const spacing = size/3;
                     for(let i = 0; i < 3; i++) {
@@ -291,12 +331,17 @@
                 }
             ];
 
-            // Return a single pattern type (no combinations)
+            /**
+             * Pattern Generator Factory
+             * Creates a new pattern generator with transformation capabilities
+             * Implements the Decorator pattern for adding rotation behavior
+             * @returns {Function} A function that generates a specific pattern with transformations
+             */
             return (x, y, size) => {
                 ctx.save();
                 ctx.translate(x, y);
                 
-                // Only rotate in 90-degree increments for predictability
+                // Rotation decorator
                 const rotation = Math.PI/2 * randomInt(0, 4);
                 if(rotation > 0) {
                     ctx.translate(size/2, size/2);
@@ -309,13 +354,36 @@
             };
         };
 
-        // Generate fewer patterns to ensure more repetition
+        /**
+         * Pattern Collection
+         * Creates a pool of pattern generators using the Factory pattern
+         * Limits the number of patterns to ensure visual coherence through repetition
+         * @type {Array<Function>}
+         */
         const patterns = Array(10).fill(null).map(generatePattern);
 
-        // Function to shuffle array
+        /**
+         * Layout System
+         * Implements a responsive grid layout system with gutters and margins
+         * Uses the Composite pattern to build complex layouts from simple components
+         */
+
+        /**
+         * Fisher-Yates shuffle implementation
+         * Used for randomizing pattern order while maintaining uniform distribution
+         * @param {Array} arr - Array to shuffle
+         * @returns {Array} New shuffled array
+         */
         const shuffle = arr => [...arr].sort(() => Math.random() - 0.5);
 
-        // Function to draw a row of patterns
+        /**
+         * Row Composition Function
+         * Implements the Composite pattern for building rows of patterns
+         * Handles spacing and layout calculations for individual patterns
+         * @param {number} xOffset - Starting X position for the row
+         * @param {number} y - Y position for the row
+         * @param {number} size - Size of each pattern cell
+         */
         const drawPatternRow = (xOffset, y, size) => {
             const gutter = size * 0.1; // 10% of pattern size for gutter
             const patternWithGutter = size * 0.8; // 80% of space for actual pattern
@@ -328,7 +396,12 @@
             }
         };
 
-        // Modified drawGrid function with reduced top margin
+        /**
+         * Grid Layout Manager
+         * Implements the Facade pattern to simplify complex layout operations
+         * Handles margin calculations, row spacing, and overall composition
+         * Uses asymmetric margins for better visual balance
+         */
         const drawGrid = () => {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             
@@ -359,7 +432,14 @@
             }
         };
 
+        // Initialize the system
         drawGrid();
+        
+        /**
+         * Event Handler
+         * Implements the Observer pattern for user interaction
+         * Regenerates the entire pattern grid on demand
+         */
         canvas.addEventListener('click', drawGrid);
     </script>
 </body>