Image Sacred Geometry Filter Effect Tool

function processImage(originalImg, lineColor = 'rgba(255, 255, 255, 0.7)', lineWidth = 2, patternScale = 0.8, patternOffsetX = 0, patternOffsetY = 0) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // Handle unloaded or zero-dimension images
    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = Math.max(1, imgWidth); // Ensure canvas is at least 1x1
        canvas.height = Math.max(1, imgHeight);
        // Returns a blank (or tiny) canvas if image dimensions are invalid.
        return canvas;
    }

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

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

    // If line width is not positive, no pattern will be visible
    if (lineWidth <= 0) {
        return canvas;
    }

    // Calculate radius 'R' for the individual circles in the Flower of Life pattern.
    // The pattern consists of 19 overlapping circles of this radius.
    // The overall diameter of this 19-circle pattern is approximately 6 times R.
    // We scale this so that 6*R fits into the smaller dimension of the image, adjusted by patternScale.
    const smallerDimension = Math.min(canvas.width, canvas.height);
    const baseRadiusDimension = smallerDimension / 6; 
    const R = baseRadiusDimension * patternScale;

    // If calculated radius is not positive (e.g., patternScale is zero or negative), no circles to draw.
    if (R <= 0) {
        return canvas;
    }
    
    // Determine the absolute center of the pattern on the canvas
    const patternCenterX = canvas.width / 2 + patternOffsetX;
    const patternCenterY = canvas.height / 2 + patternOffsetY;

    // Define relative_x, relative_y coordinates for the centers of the 19 circles of the Flower of Life
    // These coordinates are relative to (patternCenterX, patternCenterY).
    const centersRel = []; 

    // 1. Central circle
    centersRel.push({ x: 0, y: 0 });

    // 2. First ring: 6 circles whose centers are at distance R from the main center.
    // These are spaced at 60-degree intervals (PI/3 radians).
    for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI) / 3; 
        centersRel.push({ x: R * Math.cos(angle), y: R * Math.sin(angle) });
    }

    // 3. Second ring, part A: 6 circles whose centers are at distance 2R from the main center.
    // These are also spaced at 60-degree intervals, aligned with the first ring.
    for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI) / 3;
        centersRel.push({ x: 2 * R * Math.cos(angle), y: 2 * R * Math.sin(angle) });
    }
    
    // 4. Second ring, part B: 6 circles whose centers are at distance R*sqrt(3) from the main center.
    // These are spaced at 60-degree intervals but offset by 30 degrees (PI/6 radians) from the others.
    const R_sqrt3 = R * Math.sqrt(3);
    for (let i = 0; i < 6; i++) {
        const angle = Math.PI / 6 + (i * Math.PI) / 3; 
        centersRel.push({ x: R_sqrt3 * Math.cos(angle), y: R_sqrt3 * Math.sin(angle) });
    }
    // Total circles: 1 (center) + 6 (ring 1) + 6 (ring 2a) + 6 (ring 2b) = 19 circles.

    // Configure line style for drawing the circles
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;
    
    // Draw all 19 circles
    centersRel.forEach(relPos => {
        const cx = patternCenterX + relPos.x; // Absolute X center of current circle
        const cy = patternCenterY + relPos.y; // Absolute Y center of current circle
        
        ctx.beginPath(); // Start a new path for each circle to ensure they are distinct strokes
        ctx.arc(cx, cy, R, 0, 2 * Math.PI); // Define the circle path (center_x, center_y, radius, start_angle, end_angle)
        ctx.stroke(); // Draw the circle's outline
    });

    return canvas;
}