Photo Firefly Effect Filter

function processImage(originalImg, numFireflies = 100, coreColor = "#FFFF99", glowColor = "yellow", minCoreSize = 1, maxCoreSize = 3, glowStrength = 10) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to the original image's dimensions
    // Use naturalWidth/Height if available, otherwise fallback to width/height.
    // This ensures the canvas matches the actual image size, not its styled size if it's an <img> element.
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Store original shadow settings to restore them later.
    // This is good practice if the canvas context might be used for other drawings afterwards,
    // ensuring this function doesn't unintentionally affect them.
    const originalShadowColor = ctx.shadowColor;
    const originalShadowBlur = ctx.shadowBlur;
    // If globalCompositeOperation was changed, it should also be stored and restored.
    // const originalGlobalCompositeOperation = ctx.globalCompositeOperation;

    // Ensure minCoreSize is not greater than maxCoreSize for the random calculation.
    // This prevents issues if parameters are passed in the wrong order or if min > max.
    const actualMinSize = Math.min(minCoreSize, maxCoreSize);
    const actualMaxSize = Math.max(minCoreSize, maxCoreSize);
    const sizeRange = actualMaxSize - actualMinSize;

    // Loop to create and draw each firefly
    for (let i = 0; i < numFireflies; i++) {
        // Generate a random position (x, y) for the firefly within the canvas bounds
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        
        // Generate a random core radius for diversity in firefly sizes
        // It picks a value between actualMinSize and actualMaxSize.
        let coreRadius = actualMinSize + (Math.random() * sizeRange);
        
        // Ensure fireflies are at least minimally visible (e.g., if min/max are 0 or very small).
        // A radius of 0 might not render, so 0.1 ensures something is drawn.
        coreRadius = Math.max(0.1, coreRadius); 

        // Set shadow properties for the glow effect.
        // `shadowColor` defines the color of the glow.
        ctx.shadowColor = glowColor;
        // `shadowBlur` defines the blurriness and extent of the glow.
        // A larger value creates a softer, more spread-out glow.
        ctx.shadowBlur = glowStrength;

        // Set fill style for the bright core of the firefly
        ctx.fillStyle = coreColor;

        // Draw the firefly. It's a small filled circle.
        // The fill creates the core, and the shadow settings create the glow around it.
        ctx.beginPath();
        ctx.arc(x, y, coreRadius, 0, Math.PI * 2); // A full circle
        ctx.fill();
    }

    // Reset shadow settings to their original values.
    // This prevents the glow effect from applying to any subsequent drawings on this context
    // outside of this function.
    ctx.shadowColor = originalShadowColor;
    ctx.shadowBlur = originalShadowBlur;
    // ctx.globalCompositeOperation = originalGlobalCompositeOperation; // Reset if it was changed

    // Return the canvas element with the original image and the added firefly effects
    return canvas;
}