Image To Bob Ross Style Painting Converter

function processImage(originalImg, brushStrokeSize = 8, strokeIntensity = 0.6, textureAmount = 30) {
    // 1. SETUP: Create canvases and get original image data
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Source canvas to hold the original image and access its pixel data
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = width;
    sourceCanvas.height = height;
    const sourceCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
    sourceCtx.drawImage(originalImg, 0, 0);
    const sourceImageData = sourceCtx.getImageData(0, 0, width, height).data;

    // Main canvas where the "painting" will be rendered
    const paintedCanvas = document.createElement('canvas');
    paintedCanvas.width = width;
    paintedCanvas.height = height;
    const paintedCtx = paintedCanvas.getContext('2d');
    paintedCtx.fillStyle = '#FFF'; // Start with a white "gesso" layer
    paintedCtx.fillRect(0, 0, width, height);


    // 2. PAINTERLY RENDERING: Iterate and draw strokes
    // The step size determines the density of brush strokes. A smaller step means more strokes.
    const step = Math.max(1, Math.floor(brushStrokeSize / 2.5));

    for (let y = 0; y < height; y += step) {
        for (let x = 0; x < width; x += step) {
            // Get the color from the corresponding pixel in the source image
            const pixelIndex = (y * width + x) * 4;
            const r = sourceImageData[pixelIndex];
            const g = sourceImageData[pixelIndex + 1];
            const b = sourceImageData[pixelIndex + 2];

            // Set the color for the brush stroke with some transparency for a wet-on-wet feel
            paintedCtx.fillStyle = `rgba(${r},${g},${b}, 0.7)`;

            // Randomize stroke position to simulate hand-drawn imperfection and smudging
            const jitterX = (Math.random() - 0.5) * brushStrokeSize * strokeIntensity;
            const jitterY = (Math.random() - 0.5) * brushStrokeSize * strokeIntensity;
            
            // Randomize stroke size for a more organic look
            const currentStrokeSize = brushStrokeSize * (Math.random() * 0.75 + 0.25);

            // Draw the brush stroke as a rectangle for an impasto/blocky effect
            paintedCtx.fillRect(x + jitterX, y + jitterY, currentStrokeSize, currentStrokeSize);
        }
    }


    // 3. TEXTURE: Create a canvas texture layer
    const textureCanvas = document.createElement('canvas');
    textureCanvas.width = width;
    textureCanvas.height = height;
    const textureCtx = textureCanvas.getContext('2d');
    
    const textureImageData = textureCtx.createImageData(width, height);
    const data = textureImageData.data;
    for (let i = 0; i < data.length; i += 4) {
        // Generate monochrome noise
        const noise = (Math.random() - 0.5) * textureAmount;
        data[i] = 128 + noise;     // Red
        data[i + 1] = 128 + noise; // Green
        data[i + 2] = 128 + noise; // Blue
        data[i + 3] = 255;         // Alpha
    }
    textureCtx.putImageData(textureImageData, 0, 0);


    // 4. COMPOSITING: Blend the texture onto the painting
    paintedCtx.globalAlpha = 0.2; // Control the texture's visibility
    paintedCtx.globalCompositeOperation = 'overlay'; // 'overlay' is great for adding texture
    paintedCtx.drawImage(textureCanvas, 0, 0);

    // Reset settings for the next step
    paintedCtx.globalAlpha = 1.0;
    paintedCtx.globalCompositeOperation = 'source-over';


    // 5. FINAL TOUCHES: Apply color grading
    // Create a final canvas to apply filters to the entire composed image
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = width;
    finalCanvas.height = height;
    const finalCtx = finalCanvas.getContext('2d');

    // Apply filters to mimic the vibrant, slightly aged look of an oil painting
    finalCtx.filter = 'saturate(1.2) contrast(1.1) brightness(1.05)';
    finalCtx.drawImage(paintedCanvas, 0, 0);

    // The final canvas is the result
    return finalCanvas;
}