Image Coffee Ring Filter Effect Creator

function processImage(
    originalImg,
    numRings = 3,                   // Number of coffee rings
    ringRadiusMinFactor = 0.1,      // Min ring radius (factor of min image dimension)
    ringRadiusMaxFactor = 0.4,      // Max ring radius (factor of min image dimension)
    ringColorStr = "101,67,33",     // RGB values for the coffee color (e.g., "R,G,B")
    splotchOpacityMin = 0.01,       // Min opacity for individual splotches forming the ring (0.0 to 1.0)
    splotchOpacityMax = 0.05,       // Max opacity for individual splotches (0.0 to 1.0)
    splotchDensity = 1.0,           // Splotches per pixel of circumference (controls density)
    splotchSizeMaxFactor = 0.2,     // Max radius of individual splotches (factor of ring's band width)
    splotchPositionJitter = 15,     // Random offset for splotch positions (in pixels)
    ringBandWidthFactor = 0.25      // Width of the ring's band (factor of ring's main radius)
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, originalImg.width, originalImg.height);

    // Parse and validate ringColorStr
    let parsedRgb = ringColorStr.split(',').map(s => parseInt(s.trim(), 10));
    if (parsedRgb.length !== 3 || parsedRgb.some(val => isNaN(val) || val < 0 || val > 255)) {
        console.warn(`Invalid ringColorStr "${ringColorStr}". Using default "101,67,33".`);
        parsedRgb = [101, 67, 33]; // Default to a sienna/brown color
    }
    const [R, G, B] = parsedRgb;

    const minImageDim = Math.min(originalImg.width, originalImg.height);

    for (let i = 0; i < numRings; i++) {
        // Determine the main radius for the current ring
        // It's randomly chosen between min and max factors of the smallest image dimension
        const randomFactor = ringRadiusMinFactor + Math.random() * (ringRadiusMaxFactor - ringRadiusMinFactor);
        const currentRingRadius = minImageDim * randomFactor;

        if (currentRingRadius <= 0) continue; // Skip if radius is non-positive

        // Determine the center of the ring
        // Allow the center to be slightly off-canvas for a more natural look
        const placementWidth = originalImg.width + currentRingRadius; // Wider area for center placement
        const placementHeight = originalImg.height + currentRingRadius; // Taller area for center placement
        const centerX = (Math.random() * placementWidth) - (currentRingRadius / 2);
        const centerY = (Math.random() * placementHeight) - (currentRingRadius / 2);
        
        // Determine the width of the band where splotches will be drawn
        const currentRingBandWidth = currentRingRadius * ringBandWidthFactor;
        if (currentRingBandWidth <= 0) continue; // Skip if band width is non-positive

        // Calculate number of splotches based on circumference and density
        const circumference = 2 * Math.PI * currentRingRadius;
        const numSplotchesToDraw = Math.ceil(circumference * splotchDensity);
        
        // Max radius for an individual splotch forming the ring.
        const maxIndividualSplotchRadius = currentRingBandWidth * splotchSizeMaxFactor;
        if (maxIndividualSplotchRadius <= 0) continue; // Skip if splotch radius is non-positive

        for (let j = 0; j < numSplotchesToDraw; j++) {
            const angle = Math.random() * 2 * Math.PI; // Random angle for splotch position
            
            // Splotch distance from the ring's center, distributed within the band width
            // (Math.random() - 0.5) results in a range from -0.5 to 0.5
            // This distributes splotches from (currentRingRadius - currentRingBandWidth/2)
            // to (currentRingRadius + currentRingBandWidth/2)
            const splotchDistFromRingCenter = currentRingRadius + (Math.random() - 0.5) * currentRingBandWidth;

            // Base splotch coordinates
            let splotchX = centerX + splotchDistFromRingCenter * Math.cos(angle);
            let splotchY = centerY + splotchDistFromRingCenter * Math.sin(angle);

            // Add random jitter to the splotch position
            splotchX += (Math.random() - 0.5) * splotchPositionJitter;
            splotchY += (Math.random() - 0.5) * splotchPositionJitter;

            // Individual splotch radius: random size from 25% to 100% of maxIndividualSplotchRadius
            const individualSplotchRadius = (Math.random() * 0.75 + 0.25) * maxIndividualSplotchRadius;
            // Ensure radius is at least a very small positive number to avoid errors with ctx.arc
            if (individualSplotchRadius <= 0.1) continue; 

            // Determine splotch opacity
            const splotchAlpha = splotchOpacityMin + Math.random() * (splotchOpacityMax - splotchOpacityMin);

            // Draw the splotch
            ctx.beginPath();
            ctx.arc(splotchX, splotchY, individualSplotchRadius, 0, 2 * Math.PI);
            ctx.fillStyle = `rgba(${R}, ${G}, ${B}, ${Math.max(0, Math.min(1, splotchAlpha))})`; // Clamp alpha
            ctx.fill();
        }
    }

    return canvas;
}