Image Random Effects Generator With Low Intensity

/**
 * Applies a random combination of subtle visual effects to an image.
 * This function creates a unique, low-intensity filter by randomly selecting
 * 2 to 4 different effects (like brightness, contrast, saturation, hue-rotate, sepia, and blur)
 * and applying them with small, randomized values.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @returns {HTMLCanvasElement} A new canvas element with the randomly effected image.
 */
function processImage(originalImg) {
    // Create a canvas element to draw the new image on.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Define a list of functions that generate CSS filter strings.
    // Each function produces a random value within a "low intensity" range for its effect.
    const filterGenerators = [
        () => `brightness(${Math.random() * 0.1 + 0.95})`, // 95% to 105%
        () => `contrast(${Math.random() * 0.2 + 0.9})`,     // 90% to 110%
        () => `saturate(${Math.random() * 0.4 + 0.8})`,     // 80% to 120%
        () => `hue-rotate(${Math.floor(Math.random() * 21) - 10}deg)`, // -10deg to 10deg
        () => `sepia(${Math.random() * 0.20})`,             // 0% to 20%
        () => `blur(${Math.random() * 0.5}px)`              // 0px to 0.5px
    ];

    // Helper function to shuffle an array in place (Fisher-Yates shuffle).
    const shuffleArray = (array) => {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
    };

    // Shuffle the array of filter generators to ensure randomness.
    shuffleArray(filterGenerators);

    // Decide to apply a random number of effects (between 2 and 4).
    const numFiltersToApply = Math.floor(Math.random() * 3) + 2;
    const selectedGenerators = filterGenerators.slice(0, numFiltersToApply);

    // Build the final filter string by calling the selected generator functions.
    const filterString = selectedGenerators.map(gen => gen()).join(' ');

    // Apply the combined filter to the canvas context.
    ctx.filter = filterString;

    // Draw the original image onto the canvas. The filters will be applied during this step.
    ctx.drawImage(originalImg, 0, 0);

    // Return the canvas with the processed image.
    return canvas;
}