Image To Woodcut Creator

/**
 * Converts an image to a woodcut-style effect.
 * The process involves two main steps: first, the image is converted to a high-contrast
 * black and white representation using a brightness threshold. Second, a texture of
 * wavy, parallel lines is overlaid to mimic the grain of a wood block print.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} [threshold=128] The brightness threshold (from 0 to 255) to decide if a pixel becomes black or white.
 * @param {number} [invert=0] Set to 1 to invert the black and white areas; otherwise, set to 0.
 * @param {number} [lineDensity=8] The average distance in pixels between the wood grain lines. Smaller values create a denser pattern.
 * @param {number} [lineAngle=45] The angle of the wood grain lines, in degrees.
 * @param {number} [lineOpacity=0.2] The opacity of the grain lines, from 0 (transparent) to 1 (opaque).
 * @param {number} [lineWobble=0.5] The amount of waviness in the grain lines. A value of 0 results in perfectly straight lines.
 * @returns {Promise<HTMLCanvasElement>} A canvas element displaying the image with the woodcut effect.
 */
async function processImage(originalImg, threshold = 128, invert = 0, lineDensity = 8, lineAngle = 45, lineOpacity = 0.2, lineWobble = 0.5) {
    // Cast parameters to numbers to ensure they are handled correctly.
    const numThreshold = Number(threshold);
    const numInvert = Number(invert);
    const numLineDensity = Number(lineDensity);
    const numLineAngle = Number(lineAngle);
    const numLineOpacity = Number(lineOpacity);
    const numLineWobble = Number(lineWobble);

    // 1. Set up the canvas with the same dimensions as the original image.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // 2. Draw the original image onto the canvas to access its pixel data.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 3. Get the pixel data from the canvas.
    const imageData = ctx.getImageData(0, 0, w, h);
    const data = imageData.data;

    // 4. Apply the threshold filter to convert the image to black and white.
    for (let i = 0; i < data.length; i += 4) {
        // Calculate the luminance (perceived brightness) of the pixel.
        const luminance = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
        
        // Set the pixel to white (255) or black (0) based on the threshold.
        let color = (luminance >= numThreshold) ? 255 : 0;
        
        // Invert the color if the 'invert' parameter is set to 1.
        if (numInvert === 1) {
            color = 255 - color;
        }
        
        // Apply the new color to the red, green, and blue channels.
        data[i] = data[i + 1] = data[i + 2] = color;
    }
    
    // 5. Put the modified pixel data back onto the canvas.
    ctx.putImageData(imageData, 0, 0);

    // 6. Overlay the wood grain texture if density and opacity are greater than 0.
    if (numLineDensity > 0 && numLineOpacity > 0) {
        ctx.save();
        
        // Configure the appearance of the grain lines.
        ctx.strokeStyle = `rgba(0, 0, 0, ${numLineOpacity})`;
        ctx.lineWidth = 1;

        // Calculate the diagonal of the image to ensure lines cover the entire canvas when rotated.
        const diagonal = Math.sqrt(w * w + h * h);
        const step = numLineDensity;

        // Center the coordinate system and rotate it to the desired angle.
        ctx.translate(w / 2, h / 2);
        ctx.rotate(numLineAngle * Math.PI / 180);

        ctx.beginPath();
        // Draw parallel, wavy lines across the rotated canvas.
        for (let i = -diagonal / 2; i < diagonal / 2; i += step) {
            // Use a quadratic curve with random control points to create a natural wobble.
            const startY = i + (Math.random() - 0.5) * step * numLineWobble;
            const controlY = i + (Math.random() - 0.5) * step * numLineWobble;
            const endY = i + (Math.random() - 0.5) * step * numLineWobble;

            ctx.moveTo(-diagonal / 2, startY);
            ctx.quadraticCurveTo(0, controlY, diagonal / 2, endY);
        }
        ctx.stroke();
        
        // Restore the canvas context to its original state (un-rotated and un-translated).
        ctx.restore();
    }
    
    return canvas;
}