Image Constellation Overlay Filter Effect

function processImage(originalImg, numStars = 100, starColor = "rgba(255, 255, 255, 0.8)", lineColor = "rgba(255, 255, 255, 0.5)", lineWidth = 0.5, maxLineDistance = 100, starSize = 2, numConnections = 3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    if (width === 0 || height === 0) {
        console.warn("Image has zero width or height. Returning a minimal 1x1 canvas.");
        canvas.width = 1; // Avoid errors with zero-size canvas
        canvas.height = 1;
        // Optionally draw a placeholder or clear if needed, but for now, empty 1x1.
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

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

    // If no stars are requested, or star parameters make them invisible,
    // we might still want to draw lines if line parameters are valid.
    // And vice-versa. So, process stars and lines independently based on their params.

    if (numStars <= 0) {
        // No stars to generate, so no constellation effect possible
        return canvas;
    }

    // 2. Generate star points
    const stars = [];
    for (let i = 0; i < numStars; i++) {
        stars.push({
            id: i, // Unique ID for each star
            x: Math.random() * width,
            y: Math.random() * height
        });
    }

    // 3. Draw constellation lines
    // Only draw lines if they have a visible width, a non-transparent color,
    // connections are requested, and there's a valid distance to connect over.
    if (lineWidth > 0 && lineColor && lineColor.toLowerCase() !== 'transparent' && numConnections > 0 && maxLineDistance > 0 && stars.length > 1) {
        ctx.strokeStyle = lineColor;
        ctx.lineWidth = lineWidth;
        const drawnConnections = new Set(); // To avoid drawing the same line segment twice

        stars.forEach((star1) => {
            // Find potential neighbors for star1
            const potentialNeighbors = [];
            for (let j = 0; j < stars.length; j++) {
                if (star1.id === stars[j].id) continue; // Don't connect a star to itself
                
                const star2 = stars[j];
                const dx = star1.x - star2.x;
                const dy = star1.y - star2.y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                // Only consider stars within maxLineDistance and not at the exact same spot
                if (distance > 0 && distance < maxLineDistance) {
                    potentialNeighbors.push({ star: star2, distance: distance });
                }
            }

            // Sort neighbors by distance (closest first)
            potentialNeighbors.sort((a, b) => a.distance - b.distance);

            // Connect to the 'numConnections' closest neighbors
            let connectionsMadeFromThisStar = 0;
            for (let k = 0; k < potentialNeighbors.length && connectionsMadeFromThisStar < numConnections; k++) {
                const neighborStar = potentialNeighbors[k].star;

                // Create a unique key for the pair of stars (e.g., "0-1" is same as "1-0")
                const pairKey = star1.id < neighborStar.id ? `${star1.id}-${neighborStar.id}` : `${neighborStar.id}-${star1.id}`;

                if (!drawnConnections.has(pairKey)) {
                    ctx.beginPath();
                    ctx.moveTo(star1.x, star1.y);
                    ctx.lineTo(neighborStar.x, neighborStar.y);
                    ctx.stroke();
                    drawnConnections.add(pairKey);
                    connectionsMadeFromThisStar++;
                }
            }
        });
    }

    // 4. Draw stars on top of lines
    // Only draw stars if they have a positive size and a non-transparent color.
    if (starSize > 0 && starColor && starColor.toLowerCase() !== 'transparent') {
        ctx.fillStyle = starColor;
        stars.forEach(star => {
            ctx.beginPath();
            ctx.arc(star.x, star.y, starSize, 0, Math.PI * 2); // starSize is the radius
            ctx.fill();
        });
    }
    
    return canvas;
}