Image Ball Creator

function processImage(originalImg, zoom = 1.0) {
    // Ensure zoom is a positive number to avoid division by zero or other issues.
    zoom = Math.max(0.1, zoom);

    // Use the smaller dimension of the original image to create a square canvas,
    // which prevents the ball from appearing stretched.
    const size = Math.min(originalImg.width, originalImg.height);
    const radius = size / 2;

    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    // Create a temporary canvas to get the source image data.
    // We'll use a centered square crop of the original image as our texture.
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = size;
    tempCanvas.height = size;
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    
    // Calculate cropping dimensions to center the image
    const sx = (originalImg.width - size) / 2;
    const sy = (originalImg.height - size) / 2;
    tempCtx.drawImage(originalImg, sx, sy, size, size, 0, 0, size, size);
    
    // Get the raw pixel data from the cropped source image
    const src = tempCtx.getImageData(0, 0, size, size);
    const srcData = src.data;

    // Prepare the destination image data
    const dest = ctx.createImageData(size, size);
    const destData = dest.data;

    // Define and normalize the light source vector (from top-left-front)
    const light = { x: -0.5, y: -0.5, z: 1 };
    const lightMag = Math.sqrt(light.x * light.x + light.y * light.y + light.z * light.z);
    light.x /= lightMag;
    light.y /= lightMag;
    light.z /= lightMag;
    
    const ambientLight = 0.3;
    const diffuseIntensity = 1.0 - ambientLight;

    // Iterate through each pixel of the destination canvas
    for (let j = 0; j < size; j++) {
        for (let i = 0; i < size; i++) {
            const destIdx = (j * size + i) * 4;

            // Convert pixel coordinates to a normalized [-1, 1] vector from the center
            const nx = (i - radius) / radius;
            const ny = (j - radius) / radius;
            const dSq = nx * nx + ny * ny;

            // If the pixel is outside the circle, make it transparent and skip
            if (dSq > 1) {
                destData[destIdx + 3] = 0; // Set alpha to 0
                continue;
            }

            // Calculate the z-coordinate on the sphere's surface (for 3D effect)
            const nz = Math.sqrt(1 - dSq);
            
            // The surface normal vector is simply (nx, ny, nz)
            // Calculate diffuse lighting based on the dot product of the normal and light vectors
            let diffuse = nx * light.x + ny * light.y + nz * light.z;
            diffuse = Math.max(0, diffuse); // Clamp at 0
            
            const lightLevel = ambientLight + diffuseIntensity * diffuse;

            // --- Texture Mapping ---
            // Use spherical distortion to map the point back to the source image plane
            const dist = Math.sqrt(dSq);
            const sphereAngle = dist * (Math.PI / 2);
            
            // Calculate the corresponding radius on the flat source texture
            const sourceRadius = Math.sin(sphereAngle);
            
            // Apply the user-defined zoom factor
            const zoomedSourceRadius = sourceRadius / zoom;
            
            // Determine the angle on the screen to preserve orientation
            const screenAngle = Math.atan2(ny, nx);

            // Calculate the normalized source coordinates based on the distorted radius and angle
            const sourceNx = zoomedSourceRadius * Math.cos(screenAngle);
            const sourceNy = zoomedSourceRadius * Math.sin(screenAngle);

            // Convert normalized source coordinates [-1, 1] to image pixel coordinates [0, size]
            const u = (sourceNx + 1) / 2;
            const v = (sourceNy + 1) / 2;
            
            const sx = Math.floor(u * size);
            const sy = Math.floor(v * size);

            let r = 0, g = 0, b = 0, a = 255;

            // If the calculated source pixel is within the image bounds, sample its color
            if (sx >= 0 && sx < size && sy >= 0 && sy < size) {
                const srcIdx = (sy * size + sx) * 4;
                r = srcData[srcIdx];
                g = srcData[srcIdx + 1];
                b = srcData[srcIdx + 2];
                a = srcData[srcIdx + 3];
            } else {
                // Pixels outside the source texture (the "back" of the ball) are black
                a = 255;
            }
            
            // Apply the calculated light level to the sampled color
            destData[destIdx] = r * lightLevel;
            destData[destIdx + 1] = g * lightLevel;
            destData[destIdx + 2] = b * lightLevel;
            destData[destIdx + 3] = a;
        }
    }

    // Put the processed pixel data onto the canvas
    ctx.putImageData(dest, 0, 0);
    return canvas;
}