Image Sunbeam Filter Application

function processImage(originalImg, sunXpercent = 50, sunYpercent = 10, numBeams = 70, beamColor = "rgba(255, 255, 230, 0.08)", beamLengthFactor = 1.2, beamSpreadAngle_deg = 90, centralAngle_deg = 90, beamAngularWidth_deg = 1.0) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Calculate sun source coordinates
    const sunX = (sunXpercent / 100) * canvas.width;
    const sunY = (sunYpercent / 100) * canvas.height;

    // Set blend mode for light effect
    ctx.globalCompositeOperation = 'lighter';
    ctx.fillStyle = beamColor;

    // Calculate maximum possible length for beams
    // (distance to the furthest corner from the sun source)
    const corners = [
        { x: 0, y: 0 },
        { x: canvas.width, y: 0 },
        { x: 0, y: canvas.height },
        { x: canvas.width, y: canvas.height }
    ];
    let maxDistSq = 0;
    for (const corner of corners) {
        const distSq = Math.pow(corner.x - sunX, 2) + Math.pow(corner.y - sunY, 2);
        if (distSq > maxDistSq) {
            maxDistSq = distSq;
        }
    }
    const maxDistToCorner = Math.sqrt(maxDistSq);
    const actualMaxBeamLength = maxDistToCorner * beamLengthFactor;

    // Convert angles to radians
    const spreadRad = beamSpreadAngle_deg * (Math.PI / 180);
    const centralRad = centralAngle_deg * (Math.PI / 180);
    const beamWidthRad = beamAngularWidth_deg * (Math.PI / 180);

    const overallStartAngleRad = centralRad - spreadRad / 2;
    const overallEndAngleRad = centralRad + spreadRad / 2;

    if (numBeams <= 0) {
        // No beams to draw, just return canvas with original image
        ctx.globalCompositeOperation = 'source-over'; // Reset blend mode
        return canvas;
    }
    
    for (let i = 0; i < numBeams; i++) {
        // Determine the center angle for this specific beam
        let t;
        if (numBeams === 1) {
            t = 0.5; // Place single beam at the center of the spread (which is just centralAngle_deg)
        } else {
            t = i / (numBeams - 1); // Normalized position in the fan of beams (0 to 1)
        }
        
        let beamCenterAngleRad;
        if (beamSpreadAngle_deg === 0) { // If no spread, all beams align with centralAngle_deg
             beamCenterAngleRad = centralRad;
        } else {
             beamCenterAngleRad = overallStartAngleRad * (1 - t) + overallEndAngleRad * t; // Linear interpolation
        }


        // Add slight randomness to angle to avoid overly uniform look if desired (optional)
        // beamCenterAngleRad += (Math.random() - 0.5) * (spreadRad / numBeams) * 0.1;


        const angle1 = beamCenterAngleRad - beamWidthRad / 2;
        const angle2 = beamCenterAngleRad + beamWidthRad / 2;

        // Randomize beam length for a more natural look
        const currentBeamLength = actualMaxBeamLength * (0.7 + Math.random() * 0.3); // Beams are 70% to 100% of max calculated length

        const p2x = sunX + currentBeamLength * Math.cos(angle1);
        const p2y = sunY + currentBeamLength * Math.sin(angle1);
        const p3x = sunX + currentBeamLength * Math.cos(angle2);
        const p3y = sunY + currentBeamLength * Math.sin(angle2);

        ctx.beginPath();
        ctx.moveTo(sunX, sunY);
        ctx.lineTo(p2x, p2y);
        ctx.lineTo(p3x, p3y);
        ctx.closePath();
        ctx.fill();
    }

    // Reset blend mode
    ctx.globalCompositeOperation = 'source-over';

    return canvas;
}