Vegetable Dori Chopper 450 Ml Sky Blue

/**
 * Processes an image by metaphorically applying the "Vegetable Dori Chopper 450 ml Sky Blue" effect.
 * It "chops" the image into approximately 450 scattered pieces over a sky blue background.
 * 
 * @param {HTMLImageElement} originalImg - The source image to "chop".
 * @param {number} approxPieces - The approximate number of pieces to chop the image into (default: 450, matching "450 ml").
 * @param {string} backgroundColor - The background color showing through the cuts (default: "skyblue").
 * @param {number} messiness - How scattered/rotated the chopped pieces become (default: 10).
 * @param {number} gap - The gap between the chopped pieces in pixels (default: 2).
 * @returns {HTMLCanvasElement} - The canvas containing the chopped image.
 */
function processImage(originalImg, approxPieces = 450, backgroundColor = "skyblue", messiness = 10, gap = 2) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    // Fill the background with the "sky blue" color (or user provided color)
    ctx.fillStyle = String(backgroundColor);
    ctx.fillRect(0, 0, width, height);

    // Parse parameters
    const numPieces = Math.max(1, Number(approxPieces) || 450);
    const mess = Number(messiness) || 10;
    const gapSize = Number(gap) || 2;

    // Calculate grid dimensions to roughly match the desired number of pieces
    // based on the image's aspect ratio
    const ratio = width / height;
    const cols = Math.max(1, Math.round(Math.sqrt(numPieces * ratio)));
    const rows = Math.max(1, Math.round(numPieces / cols));

    const pieceWidth = width / cols;
    const pieceHeight = height / rows;

    // "Chop" the image into the grid and place onto the canvas
    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
            const sx = c * pieceWidth;
            const sy = r * pieceHeight;

            // Destination coordinates with gap reduction
            let dx = sx + gapSize / 2;
            let dy = sy + gapSize / 2;
            let dw = Math.max(1, pieceWidth - gapSize);
            let dh = Math.max(1, pieceHeight - gapSize);

            // Add "messiness" - simulate the haphazard chopping motion of a dori chopper
            let angle = 0;
            if (mess > 0) {
                // Randomly shift the piece position
                const shiftX = (Math.random() - 0.5) * mess;
                const shiftY = (Math.random() - 0.5) * mess;
                dx += shiftX;
                dy += shiftY;
                
                // Randomly rotate the piece slightly (in radians)
                angle = (Math.random() - 0.5) * mess * (Math.PI / 180);
            }

            ctx.save();
            // Move to the center of the destination area to rotate around the piece's center
            ctx.translate(dx + dw / 2, dy + dh / 2);
            ctx.rotate(angle);
            
            // Draw the chopped piece
            ctx.drawImage(
                originalImg,
                sx, sy, pieceWidth, pieceHeight,
                -dw / 2, -dh / 2, dw, dh
            );
            ctx.restore();
        }
    }

    return canvas;
}