Image Kaleidoscope Effect Generator

function processImage(originalImg, segments = 6, centerX = 0.5, centerY = 0.5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.width;
    const h = originalImg.height;

    // Ensure width and height are positive.
    // An image object might have 0x0 dimensions if not loaded or invalid.
    if (w <= 0 || h <= 0) {
        console.warn("Image has zero or negative dimensions. Returning an empty canvas.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }
    
    canvas.width = w;
    canvas.height = h;

    // --- Parameter Sanitization ---
    // Default values from function signature are used if parameters are undefined.
    // Here, we handle cases where parameters might be passed as strings needing conversion,
    // or invalid values (e.g., "foo", null, or numeric values out of expected range).

    // Segments
    let numSegmentsProcessed = Number(segments);
    if (isNaN(numSegmentsProcessed) || numSegmentsProcessed < 2) {
        numSegmentsProcessed = 6; // Fallback to default if input is invalid (e.g. "abc", null, 0, 1)
    }
    const numSegments = Math.floor(numSegmentsProcessed); // Ensure integer

    // CenterX
    let centerXProcessed = Number(centerX);
    if (isNaN(centerXProcessed)) {
        centerXProcessed = 0.5; // Fallback to default
    }
    const normCenterX = Math.max(0, Math.min(1, centerXProcessed)); // Clamp to [0, 1]

    // CenterY
    let centerYProcessed = Number(centerY);
    if (isNaN(centerYProcessed)) {
        centerYProcessed = 0.5; // Fallback to default
    }
    const normCenterY = Math.max(0, Math.min(1, centerYProcessed)); // Clamp to [0, 1]

    // --- Kaleidoscope Logic ---
    const actualCenterX = w * normCenterX;
    const actualCenterY = h * normCenterY;

    const sliceAngle = (2 * Math.PI) / numSegments;

    // Calculate the radius 'R' for the wedge.
    // R needs to be large enough so that the triangular wedge covers
    // the portion of the canvas from the 'actualCenter' to the farthest corner.
    const distToCornerX = Math.max(actualCenterX, w - actualCenterX);
    const distToCornerY = Math.max(actualCenterY, h - actualCenterY);
    const R = Math.sqrt(distToCornerX * distToCornerX + distToCornerY * distToCornerY);

    // Pre-calculate wedge vertex coordinates (relative to the wedge's apex after rotation)
    // The wedge spans from -sliceAngle/2 to +sliceAngle/2 around the segment's axis.
    const x1 = R * Math.cos(-sliceAngle / 2);
    const y1 = R * Math.sin(-sliceAngle / 2);
    const x2 = R * Math.cos(sliceAngle / 2);
    const y2 = R * Math.sin(sliceAngle / 2);

    for (let i = 0; i < numSegments; i++) {
        ctx.save();

        // Move origin to the kaleidoscope center
        ctx.translate(actualCenterX, actualCenterY);
        
        // Rotate for the current segment
        ctx.rotate(i * sliceAngle);

        // Mirror alternate segments for the classic kaleidoscope effect
        // This scale operation happens after the rotation, so it flips along the new Y-axis of the segment.
        if (i % 2 === 1) { 
            ctx.scale(-1, 1);
        }

        // Define the triangular clipping path (the wedge)
        ctx.beginPath();
        ctx.moveTo(0, 0); // Apex of the wedge is at the current origin
        ctx.lineTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.closePath();
        ctx.clip();

        // Draw the original image.
        // It's crucial to offset the drawing of the original image such that
        // its `(actualCenterX, actualCenterY)` point aligns with the current
        // transformed origin `(0,0)` (which is the apex of the wedge).
        // This is achieved by drawing the image at `(-actualCenterX, -actualCenterY)`.
        ctx.drawImage(originalImg, -actualCenterX, -actualCenterY, w, h);
        
        ctx.restore(); // Restore context to state before this segment's transformations
    }

    return canvas;
}