Image Flower Of Life Pattern Filter Effect Tool

function processImage(originalImg, lineColor = 'rgba(255, 255, 255, 0.75)', lineWidth = 2, scale = 0.1, layers = 3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // Sanitize the layers parameter: ensure it's a non-negative integer.
    // A "layer" refers to a generation of circles in the pattern.
    // layers = 1 means only the central circle.
    // layers = 2 means the central circle and its first ring of 6 neighbors (Seed of Life).
    // layers = 3 means the central, first ring, and second ring (19 circles, classic Flower of Life).
    const numLayers = Math.max(0, Math.floor(layers));

    // If no layers are requested, return the canvas with just the original image.
    if (numLayers === 0) {
        return canvas;
    }

    // Set up drawing style for the pattern lines
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth; // User-specified line width. Canvas handles invalid values (0, negative) typically by defaulting to 1.0.
    ctx.lineCap = 'round'; // Makes circle line endings look a bit smoother, though less impactful for closed paths.

    // Calculate the radius 'R' for the circles in the pattern.
    // 'scale' determines R as a fraction of the smaller dimension of the image.
    // Ensure R is at least 2 pixels to maintain visibility even at small scales.
    const R = Math.max(2, Math.min(imgWidth, imgHeight) * scale);

    // The pattern starts from the center of the image.
    const startX = imgWidth / 2;
    const startY = imgHeight / 2;

    // Use a Breadth-First Search (BFS) approach to generate circle centers.
    // 'queue' stores centers to be processed {x, y, generation}.
    // 'visited' keeps track of centers already added to avoid duplicates and redundant drawing.
    const queue = [{ x: startX, y: startY, gen: 0 }];
    const visited = new Set();

    function getKey(x, y) {
        // Generate a string key for a center coordinate.
        // Rounds coordinates to handle potential floating-point inaccuracies.
        return `${x.toFixed(3)},${y.toFixed(3)}`;
    }

    visited.add(getKey(startX, startY));

    let head = 0; // Current position in the queue (simulating a deque for BFS)
    while (head < queue.length) {
        const center = queue[head];
        head++;

        // Draw the circle
        ctx.beginPath();
        ctx.arc(center.x, center.y, R, 0, 2 * Math.PI);
        ctx.stroke();

        // If the current circle's generation is less than numLayers - 1,
        // it means we need to generate its neighbors for the next layer.
        if (center.gen < numLayers - 1) {
            for (let i = 0; i < 6; i++) { // Each circle has 6 neighbors in a hexagonal grid
                const angle = (Math.PI / 3) * i; // 60 degrees = PI/3 radians
                
                // Calculate neighbor's center: R distance away from current center
                const nx = center.x + R * Math.cos(angle);
                const ny = center.y + R * Math.sin(angle);
                const neighborKey = getKey(nx, ny);

                if (!visited.has(neighborKey)) {
                    // Add neighbor to queue only if it's at least partially visible on canvas.
                    // A circle (cx, cy, r) is partially visible if its bounding box
                    // (cx-r, cy-r, cx+r, cy+r) overlaps with canvas (0,0,imgWidth,imgHeight).
                    // Condition: cx+r > 0 AND cx-r < imgWidth AND cy+r > 0 AND cy-r < imgHeight
                    if (nx + R > 0 && nx - R < imgWidth && ny + R > 0 && ny - R < imgHeight) {
                        visited.add(neighborKey);
                        queue.push({ x: nx, y: ny, gen: center.gen + 1 });
                    }
                }
            }
        }
    }

    return canvas;
}