Image To Alcohol Marker Art Creator

function processImage(originalImg, colorLevels = 8, strokeSize = 5, outlineThreshold = 50, outlineThickness = 2) {
    // 1. --- Parameter Parsing & Validation ---
    // Ensure parameters are valid numbers.
    const lvls = Math.max(2, parseInt(colorLevels, 10));
    const size = Math.max(1, parseInt(strokeSize, 10));
    const threshold = Math.max(0, Math.min(255, parseInt(outlineThreshold, 10)));
    const thickness = Math.max(0, parseFloat(outlineThickness));

    const w = originalImg.width;
    const h = originalImg.height;

    // 2. --- Canvas Setup ---
    // The final canvas that will be returned.
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // A temporary canvas for intermediate processing steps.
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = w;
    tempCanvas.height = h;
    const tempCtx = tempCanvas.getContext('2d');

    // Helper function to reduce the number of colors in the image.
    const posterize = (value) => {
        const factor = 255 / (lvls - 1);
        return Math.round(value / factor) * factor;
    };

    // 3. --- Create Posterized Color Base ---
    // Draw the original image to the temp canvas to access its pixel data.
    tempCtx.drawImage(originalImg, 0, 0, w, h);
    let imageData = tempCtx.getImageData(0, 0, w, h);
    let data = imageData.data;
    // Iterate through each pixel and apply the posterize function.
    for (let i = 0; i < data.length; i += 4) {
        data[i] = posterize(data[i]);
        data[i + 1] = posterize(data[i + 1]);
        data[i + 2] = posterize(data[i + 2]);
    }
    // Store this posterized data for quick access during the stroke rendering phase.
    const posterizedData = new Uint8ClampedArray(data);

    // 4. --- Render Marker Strokes ---
    // Start with a white "paper" background on the final canvas.
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, w, h);

    // Iterate across the canvas in steps to draw the strokes.
    // A smaller step than the stroke size creates dense, overlapping strokes.
    const step = Math.max(1, Math.floor(size / 1.5));
    for (let y = 0; y < h; y += step) {
        for (let x = 0; x < w; x += step) {
            // Get the color for the stroke from the posterized data.
            const index = (y * w + x) * 4;
            const r = posterizedData[index];
            const g = posterizedData[index + 1];
            const b = posterizedData[index + 2];
            
            // Use alpha transparency to simulate marker layering.
            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 0.75)`;
            
            // Draw a slightly rotated square to simulate a marker dab.
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(Math.random() * Math.PI);
            ctx.fillRect(-size / 2, -size / 2, size, size);
            ctx.restore();
        }
    }
    
    // 5. --- Create Outline Layer ---
    if (thickness > 0) {
        // Create a grayscale version of the original image for edge detection.
        tempCtx.drawImage(originalImg, 0, 0, w, h);
        imageData = tempCtx.getImageData(0, 0, w, h);
        data = imageData.data;
        const grayData = new Uint8ClampedArray(w * h); // Store luminance in a 1D array for performance.
        for (let i = 0, j = 0; i < data.length; i += 4, j++) {
            const r = data[i], g = data[i + 1], b = data[i + 2];
            const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
            grayData[j] = luminance;
        }
        
        // Find edges using a simple Sobel-like gradient calculation.
        const edgePoints = [];
        for (let y = 1; y < h - 1; y++) {
            for (let x = 1; x < w - 1; x++) {
                const i = y * w + x;
                const up = grayData[(y - 1) * w + x];
                const down = grayData[(y + 1) * w + x];
                const left = grayData[y * w + (x - 1)];
                const right = grayData[y * w + (x + 1)];

                const gradX = right - left;
                const gradY = down - up;
                const magnitude = Math.sqrt(gradX * gradX + gradY * gradY);

                if (magnitude > threshold) {
                    edgePoints.push({ x, y });
                }
            }
        }

        // Draw the outlines by painting small circles at each edge point.
        tempCtx.clearRect(0, 0, w, h);
        tempCtx.fillStyle = 'black';
        for (const point of edgePoints) {
            tempCtx.beginPath();
            tempCtx.arc(point.x, point.y, thickness / 2, 0, Math.PI * 2);
            tempCtx.fill();
        }

        // 6. --- Combine Layers ---
        // Draw the outline layer on top of the colored stroke layer.
        ctx.drawImage(tempCanvas, 0, 0);
    }

    // 7. --- Return Final Canvas ---
    return canvas;
}