Please bookmark this page to avoid losing your image tool!

Image Kaleidoscope Effect Generator

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Kaleidoscope Effect Generator allows users to create visually stunning kaleidoscope effects from their images. By adjusting the number of segments and the center point, users can produce intricate designs that resemble the classic kaleidoscope toy. This tool can be used for artistic projects, graphic design, social media content, and enhancing images for personal or professional use.

Leave a Reply

Your email address will not be published. Required fields are marked *