Image To Brush Pen Art Creator

async function processImage(originalImg, brushSize = 6, strokeDensity = 5, strokeLength = 8, strokeColor = '#1a1a1a', backgroundColor = '#f5f5dc', randomness = 0.5) {
    // 1. Create canvases and contexts
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const {
        width,
        height
    } = originalImg;
    canvas.width = width;
    canvas.height = height;

    // Create a temporary canvas for image data processing
    const processingCanvas = document.createElement('canvas');
    const processingCtx = processingCanvas.getContext('2d');
    processingCanvas.width = width;
    processingCanvas.height = height;

    // 2. Prepare the background "paper"
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, width, height);

    // 3. Get pixel data from the original image
    processingCtx.drawImage(originalImg, 0, 0, width, height);
    const imageData = processingCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // 4. Set up brush properties for drawing
    ctx.strokeStyle = strokeColor;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // 5. Iterate through the image in steps and draw brush strokes
    const step = Math.max(1, Math.floor(strokeDensity));

    for (let y = 0; y < height; y += step) {
        for (let x = 0; x < width; x += step) {
            // Get the pixel index in the data array
            const index = (y * width + x) * 4;
            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];
            const a = data[index + 3];

            // Skip transparent pixels
            if (a === 0) {
                continue;
            }

            // Convert pixel color to grayscale brightness (0 to 1)
            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

            // Invert brightness because darker areas need thicker strokes
            const invertedBrightness = 1 - brightness;

            // Only draw if the area is dark enough
            if (invertedBrightness > 0.15) {
                // Calculate line width based on brightness
                const lineWidth = Math.pow(invertedBrightness, 2) * brushSize;
                ctx.lineWidth = Math.max(0.5, lineWidth);

                // Add randomness to position to avoid a grid-like appearance
                const randX = x + (Math.random() - 0.5) * step * randomness;
                const randY = y + (Math.random() - 0.5) * step * randomness;

                // Create a base angle for strokes (e.g., 45 degrees) and add randomness
                const angle = (Math.PI / 4) + (Math.random() - 0.5) * Math.PI / 2 * randomness;

                // Calculate stroke length, slightly randomized
                const len = strokeLength * (0.8 + Math.random() * 0.4);
                const endX = randX + Math.cos(angle) * len;
                const endY = randY + Math.sin(angle) * len;

                // Draw the stroke
                ctx.beginPath();
                ctx.moveTo(randX, randY);
                ctx.lineTo(endX, endY);
                ctx.stroke();

                // Occasionally add a secondary, thinner stroke for more texture
                if (Math.random() > 0.7) {
                    ctx.lineWidth = Math.max(0.2, lineWidth * 0.5);
                    const angle2 = angle + (Math.random() - 0.5) * Math.PI / 8;
                    ctx.beginPath();
                    ctx.moveTo(randX, randY);
                    ctx.lineTo(
                        randX + Math.cos(angle2) * len * 0.8,
                        randY + Math.sin(angle2) * len * 0.8
                    );
                    ctx.stroke();
                }
            }
        }
    }

    // 6. Return the final canvas
    return canvas;
}