Image Fireball Effect Generator

function processImage(originalImg, spacing = "10", sizeMultiplier = "1.5", colorMode = "fire") {
    // Parse parameters
    spacing = Math.max(2, parseInt(spacing, 10) || 10);
    sizeMultiplier = parseFloat(sizeMultiplier) || 1.5;

    const width = originalImg.width;
    const height = originalImg.height;

    // Create main canvas for the resulting effect
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");

    // Create a temporary canvas to read image pixel data
    const tempCanvas = document.createElement("canvas");
    tempCanvas.width = width;
    tempCanvas.height = height;
    const tCtx = tempCanvas.getContext("2d");
    tCtx.drawImage(originalImg, 0, 0);
    const imgData = tCtx.getImageData(0, 0, width, height).data;

    // Set a black background to enhance the glowing fireballs
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, width, height);

    // Use "screen" mode to blend the light effectively, creating intensely bright overlapping glows
    ctx.globalCompositeOperation = "screen";

    // Traverse the image grid based on spacing value
    for (let y = 0; y < height; y += spacing) {
        for (let x = 0; x < width; x += spacing) {
            let rSum = 0, gSum = 0, bSum = 0, count = 0;

            // Calculate the average color for current image grid block
            for (let by = 0; by < spacing; by++) {
                for (let bx = 0; bx < spacing; bx++) {
                    const px = x + bx;
                    const py = y + by;
                    if (px < width && py < height) {
                        const idx = (py * width + px) * 4;
                        rSum += imgData[idx];
                        gSum += imgData[idx + 1];
                        bSum += imgData[idx + 2];
                        count++;
                    }
                }
            }

            const r = Math.round(rSum / count);
            const g = Math.round(gSum / count);
            const b = Math.round(bSum / count);

            // Calculate human-perceived brightness
            const brightness = (r * 0.299 + g * 0.587 + b * 0.114) / 255;

            // Ignore darker areas to make the flame pop out of darkness
            if (brightness > 0.02) {
                // The size of a fireball depends on the block brightness
                const radius = spacing * sizeMultiplier * (brightness + 0.3);
                
                // Add a small jitter offset to make the fireballs look natural and erratic
                const offsetX = (Math.random() - 0.5) * spacing * 0.4;
                const offsetY = (Math.random() - 0.5) * spacing * 0.4;
                const cx = x + spacing / 2 + offsetX;
                const cy = y + spacing / 2 + offsetY;

                if (radius <= 0) continue;

                // Create radial fireball gradient
                const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(0.1, radius));

                if (colorMode === "original") {
                    // Match the original hue but make it glow like an orb of energy
                    grad.addColorStop(0, `rgba(255, 255, 255, ${brightness})`);
                    grad.addColorStop(0.3, `rgba(${r}, ${g}, ${b}, ${brightness * 0.8})`);
                    grad.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
                } else {
                    // Create a classic blazing hot fireball color gradient sequence
                    grad.addColorStop(0, `rgba(255, 255, 255, ${brightness})`);
                    grad.addColorStop(0.2, `rgba(255, 255, 0, ${brightness * 0.8})`);
                    grad.addColorStop(0.5, `rgba(255, 69, 0, ${brightness * 0.6})`);
                    grad.addColorStop(1, `rgba(255, 0, 0, 0)`);
                }

                ctx.beginPath();
                ctx.arc(cx, cy, radius, 0, Math.PI * 2);
                ctx.fillStyle = grad;
                ctx.fill();
            }
        }
    }

    return canvas;
}