Image Field Goal Post With Football Creator

/**
 * Creates a 40x40 image of a field goal post with a football going through it,
 * using a simulated 12-bit color palette (4 bits per channel).
 *
 * @param {Image} originalImg - An Image object, not used in this function as it generates a new image.
 * @returns {HTMLCanvasElement} A canvas element containing the generated image.
 */
function processImage(originalImg) {
    const size = 40;
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    // Define standard colors, which will be quantized to a 12-bit palette later.
    const fieldGreen = '#009900'; // A vibrant green for the field
    const postYellow = '#FFD700'; // A gold-like yellow for the post
    const footballBrown = '#A0522D'; // A standard brown for the football
    const lacesWhite = '#FFFFFF'; // White for the laces

    // 1. Draw the background (field)
    ctx.fillStyle = fieldGreen;
    ctx.fillRect(0, 0, size, size);

    // 2. Draw the field goal post
    ctx.strokeStyle = postYellow;
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // Main vertical post
    ctx.beginPath();
    ctx.moveTo(20, 40);
    ctx.lineTo(20, 18);
    ctx.stroke();

    // Crossbar
    ctx.beginPath();
    ctx.moveTo(8, 18);
    ctx.lineTo(32, 18);
    ctx.stroke();

    // Left upright
    ctx.beginPath();
    ctx.moveTo(8, 18);
    ctx.lineTo(8, 5);
    ctx.stroke();

    // Right upright
    ctx.beginPath();
    ctx.moveTo(32, 18);
    ctx.lineTo(32, 5);
    ctx.stroke();

    // 3. Draw the football
    ctx.fillStyle = footballBrown;
    ctx.beginPath();
    // Use ellipse for the football shape: center (20, 15), radiusX 5, radiusY 3, no rotation
    ctx.ellipse(20, 15, 5, 3, 0, 0, 2 * Math.PI);
    ctx.fill();
    
    // Add a dark outline to the football for definition
    ctx.strokeStyle = '#5C2E00'; // Darker brown
    ctx.lineWidth = 1;
    ctx.stroke();


    // 4. Draw the football laces
    ctx.strokeStyle = lacesWhite;
    ctx.lineWidth = 1;
    ctx.lineCap = 'butt';
    ctx.beginPath();
    ctx.moveTo(20, 13);
    ctx.lineTo(20, 17);
    ctx.stroke();

    // 5. Quantize the entire canvas to 12-bit color (4 bits per R, G, B channel)
    // 12-bit color means 2^4 = 16 levels per channel.
    // To map a 0-255 value to 16 levels, we can use the formula: round(value / 255 * 15)
    // The resulting level (0-15) is then mapped back to the 0-255 range by multiplying by 17 (255 / 15).
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
        // Red channel
        data[i] = Math.round(data[i] / 255 * 15) * 17;
        // Green channel
        data[i + 1] = Math.round(data[i + 1] / 255 * 15) * 17;
        // Blue channel
        data[i + 2] = Math.round(data[i + 2] / 255 * 15) * 17;
        // Alpha channel (data[i + 3]) is left untouched.
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}