Image Kaleidoscope Filter Effect Tool

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

    // Ensure the originalImg is usable and loaded
    if (!originalImg || typeof originalImg.width !== 'number' || typeof originalImg.height !== 'number' || originalImg.width === 0 || originalImg.height === 0) {
        console.error("Image Kaleidoscope: Original image is invalid, not loaded, or has zero dimensions.");
        // Return a minimal canvas to avoid errors downstream if image not ready
        canvas.width = 1;
        canvas.height = 1;
        ctx.fillRect(0, 0, 1, 1); // Make it visually distinct as an error/placeholder
        return canvas;
    }

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

    const outW = canvas.width;
    const outH = canvas.height;
    const outCX = outW / 2; // Center X of the output canvas
    const outCY = outH / 2; // Center Y of the output canvas

    // Sanitize and normalize parameters
    // Number of segments must be an integer, at least 1.
    const numSegments = Math.max(1, Math.floor(segments));
    // Center X and Y are normalized coordinates (0.0 to 1.0) for the source image focus point.
    const normalizedCenterX = Math.max(0.0, Math.min(1.0, centerX));
    const normalizedCenterY = Math.max(0.0, Math.min(1.0, centerY));
    // Zoom factor must be positive. >1 zooms in, <1 zooms out.
    const visualZoom = Math.max(0.01, zoom);

    // Calculate the focus point in the source image's absolute pixel coordinates
    const srcFocusX = originalImg.width * normalizedCenterX;
    const srcFocusY = originalImg.height * normalizedCenterY;

    // Angle of each kaleidoscopic segment/slice in radians
    const segmentAngle = (2 * Math.PI) / numSegments;
    
    // Determine a radius large enough for wedge points to span the entire canvas from its center.
    // This ensures the pie slices cover the whole canvas area.
    // Distance from center to a corner: sqrt((W/2)^2 + (H/2)^2). Add a small safety margin.
    const R = Math.sqrt(Math.pow(outCX, 2) + Math.pow(outCY, 2)) * 1.05; 
    // A simpler alternative, also usually sufficient: const R = Math.max(outW, outH);

    for (let i = 0; i < numSegments; i++) {
        ctx.save(); // Save current canvas state (transformations, clip regions)

        // Translate canvas origin to the center of the output canvas.
        // All subsequent operations are relative to this new origin.
        ctx.translate(outCX, outCY);

        // Rotate the canvas for the current segment's orientation.
        ctx.rotate(i * segmentAngle);

        // Reflect alternate segments to create the classic kaleidoscope mirror effect.
        // This reflects across the main axis of the segment (its local X-axis after rotation).
        if (i % 2 === 1) {
            ctx.scale(1, -1); // Reflect vertically (across the local X-axis)
        }

        // Create a clipping path for the current wedge/slice.
        // The wedge is shaped like a pie slice, with its tip at the current origin (0,0).
        // It spans an angle of `segmentAngle`, bisected by the current local X-axis
        // (i.e., extending from -segmentAngle/2 to +segmentAngle/2 radians around the positive X-axis).
        ctx.beginPath();
        ctx.moveTo(0, 0); // Start at the tip of the pie slice.
        // Draw an arc to form the curved part of the slice.
        ctx.arc(0, 0, R, -segmentAngle / 2, segmentAngle / 2);
        ctx.closePath(); // Connects the arc ends back to (0,0), forming the slice.
        ctx.clip(); // Set this path as the clipping region.

        // Calculate drawing parameters for the source image.
        // The image should be drawn scaled by `visualZoom`.
        // Its `(srcFocusX, srcFocusY)` point (from original image coordinates)
        // should align with the current canvas origin (0,0), which is the tip of the wedge.
        
        const effectiveImgWidth = originalImg.width * visualZoom;
        const effectiveImgHeight = originalImg.height * visualZoom;
        
        // Calculate dx, dy: the top-left corner for drawing the (scaled) image.
        // This ensures that `srcFocusX` (scaled by `visualZoom`) is positioned at the current origin (0,0).
        // If `srcFocusX` is the middle of the image, its new scaled coord is `(originalImg.width / 2) * visualZoom`.
        // So, `drawX = - (originalImg.width / 2) * visualZoom` would center the image horizontally.
        // Generalizing: `drawX = -srcFocusX * visualZoom`.
        const drawX = -srcFocusX * visualZoom;
        const drawY = -srcFocusY * visualZoom;

        // Draw the (potentially scaled) original image into the clipped wedge.
        ctx.drawImage(originalImg, drawX, drawY, effectiveImgWidth, effectiveImgHeight);
        
        ctx.restore(); // Restore canvas state to how it was before this segment's drawing.
    }

    return canvas;
}