Image Egg Crushing Effect Tool

async function processImage(originalImg, shardCount = 50, scatter = 10, rotation = 5, impactX = 0.5, impactY = 0.5) {
    // Dynamically import the d3-delaunay library for triangulation.
    // This is used to generate non-overlapping triangles (shards) from a set of points,
    // which is perfect for a "shattered" or "crushed" effect.
    const { Delaunay } = await import("https://cdn.skypack.dev/d3-delaunay@6");

    const canvas = document.createElement('canvas');
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    
    // Sanitize parameters to ensure they are numbers and within reasonable bounds.
    const numPoints = Math.max(10, Math.min(500, Number(shardCount)));
    const scatterAmount = Math.max(0, Number(scatter));
    const rotationDegrees = Math.max(0, Number(rotation));
    const ix = Math.max(0, Math.min(1, Number(impactX)));
    const iy = Math.max(0, Math.min(1, Number(impactY)));

    // 1. Generate points for the triangulation.
    const points = [];
    
    // Add the four corners of the image to ensure the whole area is covered.
    points.push([0, 0], [w, 0], [w, h], [0, h]);
    
    // Add the "impact" point based on input parameters.
    points.push([w * ix, h * iy]);

    // Add a number of random points which will become vertices of the shards.
    for (let i = 0; i < numPoints; i++) {
        points.push([Math.random() * w, Math.random() * h]);
    }

    // 2. Perform Delaunay triangulation to get the shard shapes.
    const delaunay = Delaunay.from(points);
    const triangles = delaunay.triangles;
    
    // 3. Render each triangle (shard) with a slight transformation.
    for (let i = 0; i < triangles.length; i += 3) {
        // Get vertex indices for the current triangle.
        const p1Index = triangles[i];
        const p2Index = triangles[i + 1];
        const p3Index = triangles[i + 2];

        // Get coordinates of the vertices.
        const p1 = points[p1Index];
        const p2 = points[p2Index];
        const p3 = points[p3Index];

        // Calculate the centroid of the triangle for the rotation and translation origin.
        const cx = (p1[0] + p2[0] + p3[0]) / 3;
        const cy = (p1[1] + p2[1] + p3[1]) / 3;

        ctx.save();

        // Create a clipping path in the shape of the triangle.
        // Anything drawn after this will only be visible inside this path.
        ctx.beginPath();
        ctx.moveTo(p1[0], p1[1]);
        ctx.lineTo(p2[0], p2[1]);
        ctx.lineTo(p3[0], p3[1]);
        ctx.closePath();
        ctx.clip();

        // Calculate random transformations for this shard.
        const angle = (Math.random() - 0.5) * 2 * rotationDegrees * (Math.PI / 180);
        const dx = (Math.random() - 0.5) * 2 * scatterAmount;
        const dy = (Math.random() - 0.5) * 2 * scatterAmount;

        // Apply transformations: rotate around centroid and then translate (scatter).
        ctx.translate(cx, cy);
        ctx.rotate(angle);
        ctx.translate(-cx, -cy);
        ctx.translate(dx, dy);

        // Draw the original image. It will be clipped by the triangle path and transformed,
        // making it appear as a distinct, displaced shard.
        ctx.drawImage(originalImg, 0, 0, w, h);
      
        // Restore the context to remove the clipping path and transformations for the next shard.
        ctx.restore();
    }

    return canvas;
}