Image To Seurat Painting Converter

/**
 * Converts an image into a Seurat-style pointillist painting.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} dotSize The radius of the dots used in the painting. Default is 3.
 * @param {number} dotJitter The amount of random positional variation for each dot. A higher value creates a more chaotic, less grid-like appearance. Default is 3.
 * @param {number} colorVariation The amount of random variation applied to the RGB channels of each dot's color. Default is 15.
 * @returns {HTMLCanvasElement} A canvas element with the Seurat-style painting.
 */
function processImage(originalImg, dotSize = 3, dotJitter = 3, colorVariation = 15) {
    // Sanitize and parse parameters to ensure they are numbers
    const size = Math.max(1, parseFloat(dotSize) || 3);
    const jitter = Math.max(0, parseFloat(dotJitter) || 3);
    const variation = Math.max(0, parseFloat(colorVariation) || 15);

    // Get image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Create a temporary canvas to get pixel data from the original image
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = width;
    sourceCanvas.height = height;
    const sourceCtx = sourceCanvas.getContext('2d');
    sourceCtx.drawImage(originalImg, 0, 0, width, height);

    // Get the pixel data from the entire source canvas
    const imageData = sourceCtx.getImageData(0, 0, width, height).data;

    // Create the target canvas where the new painting will be drawn
    const targetCanvas = document.createElement('canvas');
    targetCanvas.width = width;
    targetCanvas.height = height;
    const targetCtx = targetCanvas.getContext('2d');

    // Fill the background to simulate a canvas. A light cream color can look nice.
    targetCtx.fillStyle = '#f0f0e0';
    targetCtx.fillRect(0, 0, width, height);

    // Define the step size for iterating over the image.
    // This controls the density of the dots.
    const step = Math.floor(size);

    // Loop through the image in steps, drawing a dot for each grid point
    for (let y = 0; y < height; y += step) {
        for (let x = 0; x < width; x += step) {
            // Calculate the index for the pixel in the flat imageData array
            const index = (y * width + x) * 4;

            // Get the original color components from the image data
            const r = imageData[index];
            const g = imageData[index + 1];
            const b = imageData[index + 2];

            // Apply random color variation to each channel
            const newR = Math.max(0, Math.min(255, r + (Math.random() - 0.5) * variation));
            const newG = Math.max(0, Math.min(255, g + (Math.random() - 0.5) * variation));
            const newB = Math.max(0, Math.min(255, b + (Math.random() - 0.5) * variation));

            targetCtx.fillStyle = `rgb(${Math.floor(newR)}, ${Math.floor(newG)}, ${Math.floor(newB)})`;

            // Apply random jitter to the dot's position for a more organic feel
            const jitterX = x + (Math.random() - 0.5) * jitter * 2;
            const jitterY = y + (Math.random() - 0.5) * jitter * 2;

            // Draw the dot as a filled circle
            targetCtx.beginPath();
            targetCtx.arc(jitterX, jitterY, size, 0, Math.PI * 2, true);
            targetCtx.fill();
        }
    }

    // Return the final canvas element
    return targetCanvas;
}