Image Chaotic Noise And Mosaic Effect Maker

function processImage(originalImg, blockSize = 8, noiseIntensity = 30) {
    // Coerce parameters to numbers and provide fallback for invalid values
    blockSize = Number(blockSize);
    if (!blockSize || blockSize <= 0) {
        blockSize = 8;
    }
    
    noiseIntensity = Number(noiseIntensity);
    if (isNaN(noiseIntensity) || noiseIntensity < 0) {
        noiseIntensity = 30;
    }
    // Clamp noise intensity to a reasonable max to avoid a completely white/black image
    noiseIntensity = Math.min(noiseIntensity, 255);

    // 1. Canvas Setup
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can optimize repeated getImageData/putImageData calls
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 2. Draw original image to get its pixel data
    ctx.drawImage(originalImg, 0, 0);
    const sourceImageData = ctx.getImageData(0, 0, width, height);
    const sourceData = sourceImageData.data;
    
    // --- Step 1: MOSAIC EFFECT ---
    // Iterate through the image in blocks and draw the average color of each block.
    for (let y = 0; y < height; y += blockSize) {
        for (let x = 0; x < width; x += blockSize) {
            let r_sum = 0, g_sum = 0, b_sum = 0, a_sum = 0;
            let pixelCount = 0;

            // Determine the actual block dimensions to correctly handle the edges of the image.
            const blockWidth = Math.min(blockSize, width - x);
            const blockHeight = Math.min(blockSize, height - y);

            // Loop through each pixel within the current block of the original image
            for (let by = y; by < y + blockHeight; by++) {
                for (let bx = x; bx < x + blockWidth; bx++) {
                    const i = (by * width + bx) * 4; // Calculate the index of the pixel
                    r_sum += sourceData[i];
                    g_sum += sourceData[i + 1];
                    b_sum += sourceData[i + 2];
                    a_sum += sourceData[i + 3];
                    pixelCount++;
                }
            }
            
            // Calculate the average color for the block
            const avgR = r_sum / pixelCount;
            const avgG = g_sum / pixelCount;
            const avgB = b_sum / pixelCount;
            const avgA = a_sum / pixelCount;

            // Set the fill style to the average color and draw the block on the canvas
            ctx.fillStyle = `rgba(${avgR}, ${avgG}, ${avgB}, ${avgA / 255})`;
            ctx.fillRect(x, y, blockWidth, blockHeight);
        }
    }

    // --- Step 2: CHAOTIC NOISE EFFECT ---
    // The canvas now contains the mosaic image. Get its data to add noise.
    const mosaicImageData = ctx.getImageData(0, 0, width, height);
    const mosaicData = mosaicImageData.data;

    for (let i = 0; i < mosaicData.length; i += 4) {
        // Generate a random value between -noiseIntensity and +noiseIntensity for each color channel
        const r_rand = (Math.random() - 0.5) * 2 * noiseIntensity;
        const g_rand = (Math.random() - 0.5) * 2 * noiseIntensity;
        const b_rand = (Math.random() - 0.5) * 2 * noiseIntensity;

        // Add noise and clamp the value to the valid 0-255 range
        mosaicData[i]   = Math.max(0, Math.min(255, mosaicData[i] + r_rand));
        mosaicData[i+1] = Math.max(0, Math.min(255, mosaicData[i+1] + g_rand));
        mosaicData[i+2] = Math.max(0, Math.min(255, mosaicData[i+2] + b_rand));
        // Alpha channel (mosaicData[i + 3]) is left untouched to preserve transparency
    }

    // Put the final image data with mosaic and noise back onto the canvas
    ctx.putImageData(mosaicImageData, 0, 0);

    // 3. Return the processed canvas element
    return canvas;
}