Image To Shading Art Converter

function processImage(originalImg, gridSize = 6, lineAngle = 45, lineLengthFactor = 1.6, lineWidth = 1, lineColor = '#000000', bgColor = '#FFFFFF') {
    // Get the dimensions of the original image
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Create a temporary canvas to get the image's pixel data and convert to grayscale
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = w;
    tempCanvas.height = h;
    const tempCtx = tempCanvas.getContext('2d', {
        willReadFrequently: true // Optimization hint for frequent getImageData calls
    });
    tempCtx.drawImage(originalImg, 0, 0, w, h);

    const imageData = tempCtx.getImageData(0, 0, w, h);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Use the luminosity formula for a more perceptually accurate grayscale
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
        data[i] = data[i + 1] = data[i + 2] = gray;
    }

    // Create the final output canvas
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = w;
    outputCanvas.height = h;
    const ctx = outputCanvas.getContext('2d');

    // Fill the background with the specified color
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, w, h);

    // Set the style for the shading lines
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round'; // Gives the lines softer ends

    // Convert the line angle from degrees to radians for trigonometric functions
    const angleRad = lineAngle * Math.PI / 180;
    const cosAngle = Math.cos(angleRad);
    const sinAngle = Math.sin(angleRad);

    // Iterate over the image in a grid-like pattern
    for (let y = 0; y < h; y += gridSize) {
        for (let x = 0; x < w; x += gridSize) {
            // Sample the grayscale value from the center of the current grid cell
            const sampleX = Math.min(w - 1, x + Math.floor(gridSize / 2));
            const sampleY = Math.min(h - 1, y + Math.floor(gridSize / 2));
            const index = (sampleY * w + sampleX) * 4;
            const gray = data[index];

            // Calculate darkness on a scale of 0 (white) to 1 (black)
            const darkness = (255 - gray) / 255;

            // Skip drawing lines for very bright areas to keep highlights clean
            if (darkness < 0.1) {
                continue;
            }

            // The length of the line is proportional to the darkness of the area
            const length = darkness * gridSize * lineLengthFactor;
            const halfLength = length / 2;

            // Calculate the start and end points of the line segment, centered in the grid cell
            const centerX = x + gridSize / 2;
            const centerY = y + gridSize / 2;
            const dx = cosAngle * halfLength;
            const dy = sinAngle * halfLength;

            // Draw the line segment
            ctx.beginPath();
            ctx.moveTo(centerX - dx, centerY - dy);
            ctx.lineTo(centerX + dx, centerY + dy);
            ctx.stroke();
        }
    }

    return outputCanvas;
}