Image To Vertical Halftone Converter

/**
 * Converts an image to a vertical halftone effect.
 * The effect is created by drawing vertical lines of varying thickness based on the brightness
 * of the corresponding vertical pixel columns in the original image.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {number} lineSpacing The distance between the center of each vertical line. Must be >= 1. Default is 5.
 * @param {number} maxLineWidth The maximum width of a line, corresponding to the darkest parts of the image. Default is 4.
 * @param {string} backgroundColor The background color of the output image. Can be any valid CSS color string. Default is '#FFFFFF'.
 * @param {string} lineColor The color of the halftone lines. Can be any valid CSS color string. Default is '#000000'.
 * @returns {HTMLCanvasElement} A canvas element with the generated vertical halftone image.
 */
function processImage(originalImg, lineSpacing = 5, maxLineWidth = 4, backgroundColor = '#FFFFFF', lineColor = '#000000') {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // Get the natural dimensions of the image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set the canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas to get its pixel data
    ctx.drawImage(originalImg, 0, 0, width, height);
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Clear the canvas and fill with the specified background color
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, width, height);

    // Set the fill color for the halftone lines
    ctx.fillStyle = lineColor;

    // Sanitize input parameters to prevent errors
    const safeLineSpacing = Math.max(1, lineSpacing);
    const safeMaxLineWidth = Math.max(0, maxLineWidth);

    // Iterate through the image's width with a step of `safeLineSpacing`
    for (let x = 0; x < width; x += safeLineSpacing) {
        let totalBrightness = 0;

        // Calculate the average brightness for the current vertical column of pixels
        for (let y = 0; y < height; y++) {
            // Calculate the index for the R channel of the pixel at (x, y)
            const index = (y * width + x) * 4;

            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];

            // Convert RGB to a single brightness value using the luminosity formula
            // (0.299*R + 0.587*G + 0.114*B)
            const brightness = (0.299 * r + 0.587 * g + 0.114 * b);
            totalBrightness += brightness;
        }

        // Get the average brightness for the entire column
        const avgBrightness = totalBrightness / height;

        // Map the average brightness (0-255) to a line width.
        // Darker areas (lower brightness) will produce thicker lines.
        // The formula inverts the brightness (1 - brightness/255) and scales it by the max line width.
        const lineWidth = (1 - avgBrightness / 255) * safeMaxLineWidth;

        // Draw the vertical line if its calculated width is positive
        if (lineWidth > 0) {
            // Draw the line centered at the current x position.
            // Note: Lines can overlap if `maxLineWidth` is greater than `lineSpacing`,
            // which creates a solid effect in very dark areas.
            ctx.fillRect(x - lineWidth / 2, 0, lineWidth, height);
        }
    }

    // Return the final canvas element
    return canvas;
}